萬盛學電腦網 >> 腳本專題 >> javascript >> 兩個select多選模式的選項相互移動
兩個select多選模式的選項相互移動
本篇文章主要是對兩個select多選模式的選項相互移動示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
如下所示： 代碼如下: <!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=utf-8" /> <title>無標題文檔</title> <script type="text/javascript"> function copyToList(from,to){ var fromList=eval('document.forms[0].'+from); var toList=eval('document.forms[0].'+to); if(toList.options.length > 0 && toList.options[0].value == 'temp'){ toList.options.length=0; } var sel=false; for(i = 0;i < fromList.options.length;i++){ var current=fromList.options[i]; if(current.selected){ sel=true; if(current.value=='temp'){ alert('不能選擇這個項目!'); return; } txt=current.text; val=current.value; toList.options[toList.length]=new Option(txt,val); fromList.options[i]=null; i--; } } if(!sel) alert('你還沒有選擇任何項目!'); } function allSelect(){ var chsen=document.getElementById('chosen'); //如果chsen列表框為0或第一個選項值為'temp' if(chsen.length && chsen.options[0].value=="temp") return; for(var i=0;i<chsen.length;i++){ chsen.options[i].selected=true; } //得到數據 function getdata() { var List = document.forms[0].RoleList; //得到一個隱藏文本框對象 var roles = document.getElementById("TRoleList"); roles.value = ""; var s = ""; if (List.length != 0) { for (i = 0; i < List.length; i++) { s += List.options[i].value + ","; } } roles.value = s; } } </script> </head> <body> <table border="0"> <form onSubmit="allSelect()"> <tr> <td> <select name="possible" size="4" MULTIPLE width="200" style="width:200px"> <option value="1">中國廣州</option> <option value="2">中國上海</option> <option value="3">中國北京</option> <option value="4">中國武漢</option> </select> </td> <td><a href="javascript:copyToList('possible','chosen')">添加至右方--><br> <br> </a><a href="javascript:copyToList('chosen','possible')"><--添加至左方</a></td> <td> <select name="chosen" size="4" MULTIPLE width="200" style="width:200px;"> <option value="temp">從左邊選擇你的地區</option> </select> </td> </tr> </form> </table> <input type="button" value="提交" onclick="allSelect()" />yle <input type="text" style="display:none;" id="TRoleList"> </body> </html>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved