在csdn上转载的，作者忘记喽，下次看到在补上
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function addItem(objFrom,objTo){
for(var i = 0; i < objFrom.options.length;i++){
if(objFrom.options[i].selected == true){
var selectItem = new Option(objFrom.options[i].text,objFrom.options[i].value);
objTo.options.add(selectItem);
objFrom.options.remove(i);
}
}
sortItem(objTo);
}
function allAddItem(objFrom,objTo){
for(var i = objFrom.options.length - 1;i>=0;i--){
var objItem = new Option(objFrom.options[i].text,objFrom.options[i].value);
objTo.options.add(objItem);
objFrom.options.remove(i);
}
sortItem(objTo);
}
function sortItem(objTo){
var ln = objTo.options.length;
var arrText = new Array();
var arrValue = new Array();
for(var i=0;i<ln;i++){
arrText[i] = objTo.options[i].text;
}
arrText.sort();
for(var i=0;i<ln;i++){
for(var j = 0;j<objTo.options.length;j++){
if(arrText[i] == objTo.options[j].text){
arrValue[i] = objTo.options[j].value;
break;
}
}
}
while(ln--){
objTo.options[ln] = null;
}
for(i = 0;i<arrText.length;i++){
objTo.add(new Option(arrText[i],arrValue[i]));
}
}
// -->
</script>
</head>
<body>
<table>
<tr>
<td>Color Code </td>
<td></td>
<td>Sample Order </td>
</tr>
<tr>
<td>
<select id="selectColor" multiple="multiple" style="width:200px;height:200px;">
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="DK-RS">DARK RINSE</option>
<option value="DK-SW">DARK STONEWASH</option>
<option value="Green">Green</option>
<option value="MD-SL">MED SANDBLAST</option>
<option value="MD-SW">MED STONEWASH</option>
<option value="NA">Not applicable</option>
<option value="Yellow">Yellow</option>
<option value="Red">Red</option>
</select>
</td>
<td>
<table>
<tr>
<td><input type="button" id="btn1" value="-> " onclick="addItem(selectColor,selectSo)"/></td>
</tr>
<tr>
<td><input type="button" id="btn2" value="->>" onclick="allAddItem(selectColor,selectSo)"/></td>
</tr>
<tr>
<td><input type="button" id="btn3" value="<<-" onclick="allAddItem(selectSo,selectColor)"/></td>
</tr>
<tr>
<td><input type="button" id="btn4" value="<- " onclick="addItem(selectSo,selectColor)"/></td>
</tr>
</table>
</td>
<td>
<select id="selectSo" multiple="multiple" style="width:200px;height:200px;">
</select>
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
实现两个select之间内容的互换实测通过，很好用
从一个select 选中数据后移动到另一个select框中
js 实现 实现两个select的同步! 值得下载看看!资源免费,大家分享!!
两个 select 下拉框中的数据相互移动
使用jquery技术实现 两个select之间option的转移操作，支持全选、单选、删除操作，代码简单，功能强大，拿过来就能用哦！内附效果截图
实现了两个select值互选的效果,可以多选也可以单选
本篇文章主要是对两个select多选模式的选项相互移动示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
NULL 博文链接：https://zhouhaitao.iteye.com/blog/1154530
由两个<select>标签组成的具有挑选功能的js组建。 可实现左侧的元素移到右侧，右侧移到左侧。 有提交功能。 代码简洁、高效复用性强。 本段代码有Map的遍历读者不必细究。
NULL 博文链接：https://fangfy0537.iteye.com/blog/783669
个人制作的一个select联动菜单，效果还不错，代码很简单，select内容均从mysql数据库中取出的！
NULL 博文链接：https://yuxingxing1988.iteye.com/blog/1090351
有两个 select框，且这俩select框是关联的，触发select1，select2里面才会有值。 但是现在的问题是这样的： 触发select1，触发select2，再触发select1，此时select2里面的值变成了上次一选中的value 值，而不会被...
主要介绍了JavaScript实现两个select下拉框选项左移右移功能，js实现下拉框元素互相移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
两个相关联的select，一个select的选择会影响另一个select的输出结果
jquery select 选中值设置左右select选择互换 jquery select 选中值设置左右select选择互换
两个select,将其中一个select选中的选项添加到另一个select中,或者点击全部添加按钮将所有的option都添加过去.
本篇文章主要是对jquery操作两个select实现值之间的互相传递进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
实现两个select的不同内容的显示，使得前后不同，实现select的多选，使用bootstrap框架