萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> 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>
copyright © 萬盛學電腦網 all rights reserved