效果图
<script type="text/javascript"> function moveList(fromId, toId) { var fromList = document.getElementById(fromId); var fromLen = fromList.options.length; var toList = document.getElementById(toId); var toLen = toList.options.length; var current = fromList.selectedIndex;//需要移动的当前序号 while (current > -1) { var o = fromList.options[current]; //需要移动的当前选择项对象 var t = o.text; var v = o.value; //根据已选项新建一个列表选项
var optionName = new Option(t, v, false, false); //将该选项添加到另一列表 toList.options[toLen] = optionName; toLen++; //将该选项从列表中删除 fromList.options[current] = null; current = fromList.selectIndex; } } </script> <style type="text/css"> #leftList,#rightList,#buttons{display: block;float: left;margin: 10px;} #leftList,#rightList{width: 50px;overflow-y:hidden} #buttons{width: 40px;} </style>
<select name="leftList" id="leftList" multiple="multiple" size="6"> <option>a</option> <option>b</option> <option>c</option> </select> <div id="buttons"> <input type="button" name="to" id="to" value=">>" οnclick="moveList('leftList', 'rightList')"/> <input type="button" name="backTo" id="backTo" value="<<" οnclick="moveList('rightList', 'leftList')"/> </div> <select name="rightList" id="rightList" multiple="multiple" size="6"> <option>A</option> <option>B</option> <option>C</option> </select>
