<!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">aaa</option>
<option value="1">bbb</option>
<option value="2">c</option>
<option value="3">d</option>
<option value="4">e</option>
<option value="5">f</option>
<option value="6">g</option>
<option value="7">h</option>
<option value="8">i</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>
<input onclick="aa();"> sss</input>
</td>
</tr>
</table>
</BODY>
</HTML>
<script language="javascript">
function aa(){
var bbb="";
for(var i=0;i<document.getElementById("selectdestid").length;i++){
var aaa=document.getElementById("selectdestid").options[i].text;
bbb=aaa+","+bbb;
}
alert(bbb);
}
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);
alert(optionsObjects.length);
for(var o=0;o<optionsObjects.length;o++)
{
if(optionsObjects.options[o].selected)
{
var optionsvalue=optionsObjects.options[o].value;
var optionstext=optionsObjects.options[o].text;
removeoption(objectid,optionstext,optionsvalue)
o=o-1;
}
}
}
//删除单个选项
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>
分享到：
相关推荐
html下拉多选框样式，h5下拉多选框整套样式，用layui实现下拉框select多选,取值 layui 多选下拉框 控件 整套样式
html多选下拉框 ，CheckBox的Select组件。可多选的下拉框。
select 元素 select 元素 select 元素 01 select 元素 select控件提供下拉列表选项，供用户进行选择。下拉框通过select标记和option标记来定义。例如，在用户注册表单中，职业的选择项就使用下拉列表实现。 描述 ...
jQuery UI Multiselect是一个Web UI控件,它将html multiple select inputs转换成一个更直关、更易于操作的多选控件。支持全选添加和删除操作。
使用HTML开发商业网站 表单控件-select 表单控件 浏览网页时，经常会看到包含...<select multiple="multiple" size="4"> <!--设置多选和可见选项数--> 读书 写代码</option> <!--设置默认选中项--> 旅行 <option select
html> <head> [removed] function showDiv(id){ document.getElementById(“selectOption”).style.display=”block”; document.getElementById(“selectOption”).style.position=”absolute”; document...
select2.sortable 结合 select2 和 html5sortable 排序多选择列表真棒！
主要介绍了jQuery实现动态加载select下拉列表项功能,结合实例形式较为详细的分析了jQuery动态加载select下拉列表项的步骤与相关操作技巧,需要的朋友可以参考下
layui的select下拉框插件，可以多选
[js]$("#test-select").zselect({multiple: true/false//is multiple select or notoptions:[{//select optionsvalue:1,label:"China",mark:"Asia"},{value:2,label:"USA",mark:"America"},{value:3,label:"India",...
在前段HTML页面设计中select 下拉框，或者 在 multiple=”multiple” 时，表现为列表。经常会在页面上对其进行操作，这些操作不外乎： 1. 得到选中的 select 的 option 的值或者text. 2. 删除选中的 select 的 ...
代码如下:”input.options” v-model=”input.value” ref=”typeSelect” index=”index” childidx=”childIdx” load=”load” multiple=”input.multiple” method=”change”> js // select 插件 Vue....
不知道怎么描述，就是有两个select下拉，做成文本域那样的，可以从一侧的结果集中选择值，添加到另一侧中；另一侧删掉后，值又重新到结果集那边了。直接看范例演示吧，相信你以前后者以后会用到的！ 不多说了，上...
XML/HTML Code复制内容到剪贴板 style> <select multiple=multiple id=select1 style=width:150px; height:160px;> 选项1 选项2 选项3</option
呃。其实很简单的东西啦。页面的图 两个列表都可以多选， ...select id=”select1″ size=”5″ multiple style=”width:100px ” > ”111″>北京</option> ”222″>上海</option> <option value=”3
在写一个功能时发现el-select支持多选，但是竟然不支持全选，好无语哦，那就自己实现一下吧~有两种方法，第二种感觉简单些 方法一：下拉项增加一个【全选】，然后应该有以下几种情况...el-select multiple collapse-tag
本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下： select选择框内容左右移动，简单...select id=leftSelector multiple=multiple name=SmsListOnLeft style=height:100px; width:
vue-next-select 文献资料 贡献 提出拉取请求之前，请务必先阅读。 # build package yarn build # run linter yarn lint # run tests yarn test
用select2插件，实现以下这个选择框： 1、html代码 预定义参数 <select class=js-states form-control id=preParamDefine multiple=multiple style=width: 100%></sel