<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<table>
<tr>
<td>
<select multiple="multiple" size="15" style="width=200px" id="selectsrcid">
<option value="0">测试一</option>
<option value="1">测试二</option>
</select>
</td>
<td>
<input type="button" value=" >> " onclick="javascript:srcToDest('selectsrcid','selectdestid')">
<br>
<input type="button" value=" << " onclick="javascript:destToSrc('selectdestid')">
</td>
<td>
<select multiple="multiple" size="15" style="width=200px" id="selectdestid">
</select>
</td>
</tr>
</table>
</BODY>
</HTML>
<script language="javascript">
function srcToDest(srcid,destid)
{
var optionsObjects=document.getElementById(srcid);
var optionsSubObjects=document.getElementById(destid);
for(var o=0;o<optionsObjects.length;o++)
{
if(optionsObjects.options[o].selected==true)
{
var optionsvalue=optionsObjects.options[o].value;
var optionstext=optionsObjects.options[o].text;
addoptions(destid,optionstext,optionsvalue)
}
}
}
//向目标
function addoptions(objectid,textvalue,optionsvalue)
{
var optionsSubObjects=document.getElementById(objectid);
var hasexist=0;
for(var o=0;o<optionsSubObjects.length;o++)
{
var optionsvalue_sub=optionsSubObjects.options[o].text;
if(optionsvalue_sub==textvalue)
hasexist+=1;
}
if(hasexist==0)
{
optionsSubObjects.add(new Option(textvalue, optionsvalue));
}
}
//将对象中所选的项删除
function destToSrc(objectid)
{
var optionsObjects=document.getElementById(objectid);
for(var o=0;o<optionsObjects.length;o++)
{
if(optionsObjects.options[o].selected==true)
{
var optionsvalue=optionsObjects.options[o].value;
var optionstext=optionsObjects.options[o].text;
removeoption(objectid,optionstext,optionsvalue)
}
}
}
//删除单个选项
function removeoption(objectid,textvalue,optionsvalue)
{
var optionsSubObjects=document.getElementById(objectid);
for(var o=0;o<optionsSubObjects.length;o++)
{
var optionsvalue_sub=optionsSubObjects.options[o].text;
if(optionsvalue_sub==textvalue)
optionsSubObjects.options.remove(o);
}
}
</script>
分享到：
相关推荐
-- 左边选择框 --> <select id="leftSelect" multiple style="width:100px;height:200px"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="南京">南京</...
<p>one</p> <div><p>two</p></div> <p>three</p> jQuery 代码: $("div > p"); 结果: [ <p>two</p> ] -------------------------------------------------------------------------------- 在文档的第一个表单...
项目要实现这样的一个功能(如下图所示):选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除...select id=fb_list name=fb_list multiple=multiple size=8
在vue的实际开发过程中，我们如何将以选中的值直接渲染到页面中，这次主要说的是多选框和下拉列表的实现： <label>测试多选渲染：</label> <div> <template v-for=item> <input type=checkbox name=hobby :...
A)<form></form> B)<select multiple name="NAME" size=?></select> C)<option> D)<select name="NAME"></select> 1、HTML的全称是什么？HTML语言是什么？ 答：HTML（HyperText Markup Language）的中文名称为“超...
Select Multiple 是一个交互友好的，嵌入式的，标准选择框替代品，并且它带有可以激活的多种属性。它有以下特点：以一个不显眼的方式工作完全开源支持键盘提供了一些回调可通过 CSS 完全定制化简洁的代码 ...
就是实现这个效果的，选中添加到右边，全部添加到右边，选中删除到左边，全部删除到左边。... <option value=”1″>选项1</option> <option value=”2″>选项2</option> <option value=”3″>选项3</option>
html下拉多选框样式，h5下拉多选框整套样式，用layui实现下拉框select多选,取值 layui 多选下拉框 控件 整套样式
multiple属性表示是否允许多项选择 <select name="test" id="test"> <option>1</option> <option>2</option> <option>3</option> </select> <button id="btn">是否多选</button
$a <= $b ：小于等于 $a > $b ：大于 $a >= $b ：大于等于 与C一样PHP也有三重运算符（?:）。位操作符在PHP同样存在。 优先权 就和C以及Java一样！ 2.7 控制流程结构 PHP有着与C一样的流程控制。我将在下面大概...
用select2插件，实现以下这个选择框： 1、html代码 <div class=form-group xss=removed id='preParamGroup'> <label for=inputEmail3 class=col-sm-2>预定义参数</label> <div class=col-sm-8> <select ...
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端项目-multiple-select,multiple select是一个jquery插件，用于使用复选框（）选择多个元素。
<div align="center" id="container" title="这是一个div"></div> 四大标准属性： 1、id ：定义元素在页面中独一无二的名称 2、title ：鼠标悬停在元素上时，体现的文字 3、class ：引用 类选择器时使用(CSS中)...
本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下： select选择框内容左右移动，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，运行效果图： 具体代码如下 <!...
移动友好：对每个选择侧使用复选框而不是 <input type="multiple">。 特征： 传入一个表达式来表示一个item的显示 列标题可定制 (6/3/14) 支持新属性“required-min”，它为最少数量的选定值添加表单验证。...
wheatma-react-multiple-select-box-e9f6035 多重选择框
js实现的可下拉可输入input框 会自动检测输入的值在select中寻找对应选项
于是尝试了用input+select来实现，结果如下： 具体代码及演示地址：www.homdian.com/test.aspx 这种方法其实是在下拉框上压一个文本框，能够实现输入，也能够实现下拉框的选择。但根据输入值用用异步的方式绑定...
列表框可以一次选择多项： // 只需设置列表框的属性 SelectionMode="Multiple",按Ctrl可以多选 //7. 两个列表框联动，即两级联动菜单 // //判断第一个列表框中被选中的值 // switch(ListBox1.SelectValue) // {...