javascript實現多重選擇清單方塊

 

1. <script language="javascript">
2. function MM_findObj(n, d) { //v4.0
3.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
4.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
5.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
6.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
7.   if(!x && document.getElementById) x=document.getElementById(n); return x;
8. }
9. function checkPostType(des,op){
10.  if(!des || !op) return true;
11.  var flag = true;
12.  var ops = des.options;
13.  var i=0;
14.  for(i=0;i<ops.length;i++){
15.   if(ops.item(i).value==op.value) {
16.    flag=false;
17.   }
18.   if(ops.item(i).value%100==0 && ops.item(i).value==op.value-op.value%100){
19.    flag=false;
20.   }
21.   if(!flag){
22.    alert('選項 ['+ops.item(i).innerText+'] 已經包含了 ['+op.innerText+'].');
23.    return flag;
24.   }
25.   if(op.value%100==0 && op.value==ops.item(i).value-ops.item(i).value%100){
26.    ops.remove(i);
27.    i--;
28.   }
29.  }
30.  return flag;
31. }
32. //此函數實現列表中所選擇項的刪除與移到到別外一個列表中的功能.2001/04/04
33. //參數表：
34. //src 源列表
35. //des 目的列表(如果省略則刪除源列表中選中的項)
36. //exce 如果源列表中某一項的文本與此參數相同則該項不能被移走或刪除(可省略)
37. //d1 指定源列表所在的架構或視窗(如省略則在當前架構或視窗中尋找)
38. //d2 指定目的列表所在的架構或視窗(如省略則在當前架構或視窗中尋找)
39. //
40. function SelMove(src,des,check,exce,d1,d2,del) {  if (!src) return false;
41.         var oSrc=MM_findObj(src,d1);
42.         if (!oSrc) return false;
43.         if (!des) {
44.                 for (i=0;i<oSrc.options.length;i++) {
45.                         if (oSrc.options(i).selected){
46.                                 if (oSrc.options(i).innerText!=exce) {
47.                                         oSrc.options.remove(i);
48.                                         i--;
49.                                 }
50.                         }
51.                 }
52.         }
53.         else {
54.                 var oDes=MM_findObj(des,d2);
55.                 if (!oDes) return false;
56.                 for (i=0;i<oSrc.options.length;i++) {
57.                         var oSrcOption =oSrc.options.item(i);
58.                         if(oSrcOption.selected){
59.                                 if(check && check(oDes,oSrcOption)){
60.                                         if(oSrcOption.innerText!=exce) {
61.                                                 var oOption = document.createElement("OPTION");
62.                                                 oDes.options.add(oOption);
63.                                                 oOption.innerText = oSrcOption.innerText;
64.                                                 oOption.value = oSrcOption.value;
65.                                                 oSrcOption.selected=false;
66.                                                 if(del) {oSrc.options.remove(i);i--;}
67.                                         }
68.                                 }
69.                         }
70.                 }
71.         }
72. }
74. function check_City(des,op){
75.  if(checkPostType(des,op)){
76.   if(des.options.length>=3){
77.    alert("不可以超過三個！");
78.    return false;
79.   }
80.   else return true;
81.  }
82.  else {
83.   return false;
84.  }
85. }
86. function SelSelectedAll(oSrc){
87.         if(!oSrc) return false;
88.         var i;
89.         for(i=0;i<oSrc.options.length;i++){
90.                 oSrc.options.item(i).selected=true;
91.         }
93. }
94. function check()
95. {
96. SelSelectedAll(document.form1.b)
97. }
98. </script>
99. <form id="form1" name="form1" method="post" action="b.asp">
100.   <select name="a" size="10" multiple="multiple" id="a" style="width: 180px;font-size: 12px;">
101.   <option value="1">1</option>
102.     <option value="2">2</option>
103.     <option value="3">3</option>
104.     <option value="4">4</option>
105.     <option value="5">5</option>
106.         </select>
107.   <a href="#" onclick="SelMove('a','b',check_City)">添加</a>
108.   <select name="b" size="10" multiple="multiple" id="b" style="width: 180px;font-size: 12px;">
109.     
110.   </select>
111.   <input type="submit" name="button" id="button" value="提交" onclick="check()" />
112. </form>