两个select多选控件中项的移动的相关操作
效果：
代码：
<html><head> <title></title>
<script language="javascript"> 
function Add(objA,objB)
{
var tem=new Array(); with(objA) for(i=length-1;i>=0;i--) if(options[i].selected){tem[tem.length]=new Option(options[i].text,options[i].value);} if(objA.selectedIndex>-1) { for(i=0;i<objB.length;i++) tem[tem.length]=objB.options[i]; with(objB) { length=0; tem.sort(sortArr); for(i=0;i<tem.length;i++) options[length]=new Option(tem[i].text,tem[i].value)
} } } function sortArr(a,b) { if(a.text>b.text)return 1; if(a.text<b.text)return -1; return 0; } // // function up(obj) { var objO = new Option(obj.options[obj.selectedIndex].text,obj.options[obj.selectedIndex].value); var selectedIndex = obj.selectedIndex; if(selectedIndex>0) { obj.options[selectedIndex].text = obj.options[selectedIndex-1].text; obj.options[selectedIndex].value = obj.options[selectedIndex-1].value; obj.options[selectedIndex-1].text = objO.text; obj.options[selectedIndex-1].value = objO.value; obj.selectedIndex = selectedIndex-1; } } // // function down(obj) { var objO = new Option(obj.options[obj.selectedIndex].text,obj.options[obj.selectedIndex].value); var selectedIndex = obj.selectedIndex; if(selectedIndex<obj.options.length-1) { obj.options[selectedIndex].text = obj.options[selectedIndex+1].text; obj.options[selectedIndex].value = obj.options[selectedIndex+1].value; obj.options[selectedIndex+1].text = objO.text; obj.options[selectedIndex+1].value = objO.value; obj.selectedIndex = selectedIndex+1; } } // // 双击时添加到b function dba(objA,objB) { var objO=new Option(objA.options[objA.selectedIndex].text,objA.options[objA.selectedIndex].value) objB.add(objO); } // // 双击时删除b function dbb(obj) { obj.removeChild(obj.options[obj.selectedIndex]); } // // 删除b中选中的项 function del(obj) { for(var i=obj.options.length-1;i>=0;i--) { if(obj.options[i].selected) { obj.removeChild(obj.options[i]); } } } // // function getvalue(obj) { var str=""; for(var i=0;i<obj.options.length;i++) { if(str.length>0) str = str + "," + obj.options[i].value; else str = obj.options[i].value; } document.getElementById("selectValue").innerText = str; } //
</script></head><body bgcolor="#CCCCCC"> <table cellspacing="0" cellpadding="0" width="448" border="0"> <tr> <td width="45%" align="center"> <select style="width: 155px" multiple size="15" name="a" ondblclick="dba(this,document.getElementById('b'))"> <option value="av1" title="av1">at1</option> <option value="av2" title="av2" style="background-color:#999999">at2</option> <option value="av3" title="av3">at3</option> <option value="av4" title="av4">at4</option> <option value="av5" title="av5">at5</option> <option value="av6" title="av6">at6</option> <option value="av7" title="av7">at7</option> </select> </td> <td> <input onClick="Add(document.getElementById('a'),document.getElementById('b'))" type="button" value=">>" style="width: 40px"> <br> <input onClick="del(document.getElementById('b'))" type="button" value="Del" style="width: 40px"> <br> <input onClick="up(document.getElementById('b'))" type="button" value="b↑" style="width: 40px"> <br> <input onClick="down(document.getElementById('b'))" type="button" value="b↓" style="width: 40px"> </td> <td width="45%" align="center"> <select style="width: 155px" multiple size="15" name="b" ondblclick="dbb(this)"> <option value="bv1">bt1</option> <option value="bv2">bt2</option> <option value="bv3">bt3</option> <option value="bv4">bt4</option> <option value="bv5">bt5</option> <option value="bv6">bt6</option> <option value="bv7">bt7</option> <option value="bv8">bt8</option> </select> </td> </tr> <tr> <td colspan="3" align="center"> <input type="button" name="button1" value="获得右边select值" onClick="getvalue(document.getElementById('b'))"></td> </tr> <tr> <td colspan="3" align="center"> <div id="selectValue"> </div> </td> </tr> </table></body></html>
