實現功能：
1.左邊的下拉框內容添加到右邊的下拉框，支持多選移動，且同時將右邊的下拉框對象移除；
2.支持列表中項目上下位置的移動；
3.效果圖如下：
Html代碼
<HTML> <HEAD> <TITLE>選擇下拉菜單</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <META NAME="Description" CONTENT="Power by hill"> </HEAD> <BODY> <p>選定一項或多項然后點擊添加或移除(按住shift或ctrl可以多選)，或在選擇項上雙擊進行添加和移除。</p> <form method="post" name="myform"> <table border="0" width="300"> <tr> <td width="40%"> <select style="WIDTH:100%" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="山東">山東</option> <option value="安徽">安徽</option> <option value="重慶">重慶</option> <option value="福建">福建</option> <option value="甘肅">甘肅</option> <option value="廣東">廣東</option> <option value="廣西">廣西</option> <option value="貴州">貴州</option> <option value="海南">海南</option> <option value="河北">河北</option> <option value="黑龍江">黑龍江</option> </select> </td> <td width="20%" align="center"> <input type="button" value="添加" onclick="moveOption(document.myform.list1, document.myform.list2)"><br/> <br/> <input type="button" value="刪除" onclick="moveOption(document.myform.list2, document.myform.list1)"> </td> <td width="40%"> <select style="WIDTH:100%" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)"> </select> </td> <td> <button onclick="changepos(list2,-1)" type="button">上移</button> <br/> <button onclick="changepos(list2,1)" type="button">下移</button> </td> </tr> </table> 值：<input type="text" name="city" size="40"> </form> <script language="JavaScript"> <!-- function moveOption(e1, e2){ try{ for(var i=0;i<e1.options.length;i++){ if(e1.options[i].selected){ var e = e1.options[i]; e2.options.add(new Option(e.text, e.value)); e1.remove(i); ii=i-1 } } document.myform.city.value=getvalue(document.myform.list2); } catch(e){} } function getvalue(geto){ var allvalue = ""; for(var i=0;i<geto.options.length;i++){ allvalue +=geto.options[i].value + ","; } return allvalue; } function changepos(obj,index) { if(index==-1){ if (obj.selectedIndex>0){ obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1)) } } else if(index==1){ if (obj.selectedIndex<obj.options.length-1){ obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1)) } } } //--> </script> </BODY> </HTML> 總結
以上所述是小編給大家介紹的JS實現左邊列表移到到右邊列表功能 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
