双击任一Select控件,查看效果:
源码:
<html> <head> <script> function removeItem(){ var sltSrc=document.getElementById('sltSrc'); var sltTarget=document.getElementById('sltTarget'); for(var i=0;i<sltSrc.options.length;i++) { var tempOption=sltSrc.options[i]; if(tempOption.selected){ sltSrc.removeChild(tempOption); sltTarget.appendChild(tempOption); } } } function addItem(){ var sltSrc=document.getElementById('sltSrc'); var sltTarget=document.getElementById('sltTarget'); for(var i=0;i<sltTarget.options.length;i++) { var tempOption=sltTarget.options[i]; if(tempOption.selected){ sltTarget.removeChild(tempOption); sltSrc.appendChild(tempOption); } } } function showSelectOptions(){ var sltTarget=document.getElementById('sltTarget'); var myhtml=""; for(var i=0;i<sltTarget.options.length;i++) { myhtml +="Select Item" + i + ": text= " + sltTarget.options[i].text + ", value=" + sltTarget.options[i].value + "<br/>"; } document.getElementById("showInfo").innerHTML=myhtml; } </script> </head> <body> <select ondblclick="removeItem();" id="sltSrc" multiple="true" style="height:150px;150px"> <option value="a">srcA</option> <option value="b">srcB</option> <option value="c">srcC</option> </select> <select ondblclick="addItem();" id="sltTarget" multiple="true" style="height:150px;150px"> <option value="a">targetA</option> <option value="b">targetB</option> <option value="c">targetC</option> </select> <div id="showInfo"></div> <input type="button" value="showSelectOptions" onclick="showSelectOptions();"/> </body> </html>