两个select之间option的互相添加操作(jquery实现) - - web - J...

两个select,将其中一个select选中的选项添加到另一个select中,或者点击全部添加按钮将所有的option都添加过去.
自己写了一个很简单的jquery插件,在页面中调用其中的函数就可实现.
插件源代码(listtolist.js):

Js代码

1. /**  
2. fromid:源list的id.  
3. toid:目标list的id.  
4. moveOrAppend参数("move"或者是"append"):  
5. move -- 源list中选中的option会删除.源list中选中的option移动到目标list中,若目标list中已存在则该option不添加.  
6. append -- 源list中选中的option不会删除.源list中选中的option添加到目标list的后面,若目标list中已存在则该option不添加.  
7.  
8. isAll参数(true或者false):是否全部移动或添加  
9. */  
10. jQuery.listTolist = function(fromid,toid,moveOrAppend,isAll) {   
11.     if(moveOrAppend.toLowerCase() == "move") {  //移动   
12.         if(isAll == true) { //全部移动   
13.             $("#"+fromid+" option").each(function() {   
14.                 //将源list中的option添加到目标list,当目标list中已有该option时不做任何操作.   
15.                 $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));   
16.             });   
17.             $("#"+fromid).empty();  //清空源list   
18.         }   
19.         else if(isAll == false) {   
20.             $("#"+fromid+" option:selected").each(function() {   
21.                 //将源list中的option添加到目标list,当目标list中已有该option时不做任何操作.   
22.                 $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));   
23.                 //目标list中已经存在的option并没有移动,仍旧在源list中,将其清空.   
24.                 if($("#"+fromid+" option[value="+$(this).val()+"]").length > 0) {   
25.                     $("#"+fromid).get(0)   
26.                     .removeChild($("#"+fromid+" option[value="+$(this).val()+"]").get(0));   
27.                 }   
28.             });   
29.         }   
30.     }   
31.     else if(moveOrAppend.toLowerCase() == "append") {   
32.         if(isAll == true) {   
33.             $("#"+fromid+" option").each(function() {   
34.                 $("<option></option>")   
35.                 .val($(this).val())   
36.                 .text($(this).text())   
37.                 .appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));   
38.             });   
39.         }   
40.         else if(isAll == false) {   
41.             $("#"+fromid+" option:selected").each(function() {   
42.                 $("<option></option>")   
43.                 .val($(this).val())   
44.                 .text($(this).text())   
45.                 .appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));   
46.             });   
47.         }   
48.     }   
49. };   
50. /**  
51. 功能大体同上("move").  
52. 不同之处在于当源list中的选中option在目标list中存在时,源list中的option不会删除.  
53.  
54. isAll参数(true或者false):是否全部移动或添加  
55. */  
56. jQuery.list2list = function(fromid,toid,isAll) {   
57.     if(isAll == true) {   
58.         $("#"+fromid+" option").each(function() {   
59.             $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));   
60.         });   
61.     }   
62.     else if(isAll == false) {   
63.         $("#"+fromid+" option:selected").each(function() {   
64.             $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));   
65.         });   
66.     }   
67. };  

/**fromid:源list的id.toid:目标list的id.moveOrAppend参数("move"或者是"append"):move -- 源list中选中的option会删除.源list中选中的option移动到目标list中,若目标list中已存在则该option不添加.append -- 源list中选中的option不会删除.源list中选中的option添加到目标list的后面,若目标list中已存在则该option不添加.isAll参数(true或者false):是否全部移动或添加*/jQuery.listTolist = function(fromid,toid,moveOrAppend,isAll) {if(moveOrAppend.toLowerCase() == "move") {	//移动if(isAll == true) {	//全部移动$("#"+fromid+" option").each(function() {//将源list中的option添加到目标list,当目标list中已有该option时不做任何操作.$(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));});$("#"+fromid).empty();	//清空源list}else if(isAll == false) {$("#"+fromid+" option:selected").each(function() {//将源list中的option添加到目标list,当目标list中已有该option时不做任何操作.$(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));//目标list中已经存在的option并没有移动,仍旧在源list中,将其清空.if($("#"+fromid+" option[value="+$(this).val()+"]").length > 0) {$("#"+fromid).get(0).removeChild($("#"+fromid+" option[value="+$(this).val()+"]").get(0));}});}}else if(moveOrAppend.toLowerCase() == "append") {if(isAll == true) {$("#"+fromid+" option").each(function() {$("<option></option>").val($(this).val()).text($(this).text()).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));});}else if(isAll == false) {$("#"+fromid+" option:selected").each(function() {$("<option></option>").val($(this).val()).text($(this).text()).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));});}}};/**功能大体同上("move").不同之处在于当源list中的选中option在目标list中存在时,源list中的option不会删除.isAll参数(true或者false):是否全部移动或添加*/jQuery.list2list = function(fromid,toid,isAll) {if(isAll == true) {$("#"+fromid+" option").each(function() {$(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));});}else if(isAll == false) {$("#"+fromid+" option:selected").each(function() {$(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));});}};

 

测试页面(listtolist.html)

Html代码

1. <html>  
2. <head>  
3.     <script src="jquery.js"></script>  
4.     <script src="listtolist.js"></script>  
5.     <script type="text/javascript">  
6.         $(document).ready(function() {   
7.             $("#select1").dblclick(function() {$.listTolist("select1","select2","move",false);});   
8.             $("#select2").dblclick(function() {$.listTolist("select2","select1","move",false);});   
9.             $("#moveright").click(function() {$.listTolist("select1","select2","move",false);});   
10.             $("#moverightall").click(function() {$.listTolist("select1","select2","move",true);});   
11.             $("#moveleft").click(function() {$.listTolist("select2","select1","move",false);});   
12.             $("#moveleftall").click(function() {$.listTolist("select2","select1","move",true);});   
13.                
14.             $("#select3").dblclick(function() {$.listTolist("select3","select4","append",false);});   
15.             $("#select4").dblclick(function() {$.listTolist("select4","select3","append",false);});   
16.             $("#appendright").click(function() {$.listTolist("select3","select4","append",false);});   
17.             $("#appendrightall").click(function() {$.listTolist("select3","select4","append",true);});   
18.             $("#appendleft").click(function() {$.listTolist("select4","select3","append",false);});   
19.             $("#appendleftall").click(function() {$.listTolist("select4","select3","append",true);});   
20.                
21.             $("#select5").dblclick(function() {$.list2list("select5","select6",false);});   
22.             $("#select6").dblclick(function() {$.list2list("select6","select5",false);});   
23.             $("#transright").click(function() {$.list2list("select5","select6",false);});   
24.             $("#transrightall").click(function() {$.list2list("select5","select6",true);});   
25.             $("#transleft").click(function() {$.list2list("select6","select5",false);});   
26.             $("#transleftall").click(function() {$.list2list("select6","select5",true);});   
27.         });   
28.     </script>  
29. </head>  
30. <body>  
31. <form action="#" method="post">  
32.     <p>移动(move)测试:</p>  
33.     <label for="select1">select1</label>  
34.     <select id="select1" style="width:100px" size="5" multiple="true">  
35.         <option value="1">number 1</option>  
36.         <option value="2">number 2</option>  
37.         <option value="3">number 3</option>  
38.         <option value="4">number 4</option>  
39.         <option value="5">number 5</option>  
40.         <option value="6">number 6</option>  
41.         <option value="7">number 7</option>  
42.         <option value="8">number 8</option>  
43.         <option value="9">number 9</option>  
44.         <option value="10">number 10</option>  
45.         <option value="11">number 11</option>  
46.     </select>  
47.     <label for="select2">select2</label>  
48.     <select id="select2" style="width:100px" size="5" multiple="true">  
49.         <option value="4">number 4</option>  
50.         <option value="5">number 5</option>  
51.         <option value="6">number 6</option>  
52.     </select>  
53.     <br />  
54.     <button id="moveright">右移</button>  
55.     <button id="moverightall">全部右移</button>  
56.     <button id="moveleft">左移</button>  
57.     <button id="moveleftall">全部左移</button>  
58.     <hr />  
59.     <p>追加(append)测试:</p>  
60.     <label for="select3">select3</label>  
61.     <select id="select3" style="width:100px" size="5" multiple="true">  
62.         <option value="1">number 1</option>  
63.         <option value="2">number 2</option>  
64.         <option value="3">number 3</option>  
65.         <option value="4">number 4</option>  
66.         <option value="5">number 5</option>  
67.         <option value="6">number 6</option>  
68.         <option value="7">number 7</option>  
69.         <option value="8">number 8</option>  
70.         <option value="9">number 9</option>  
71.         <option value="10">number 10</option>  
72.         <option value="11">number 11</option>  
73.     </select>  
74.     <label for="select4">select4</label>  
75.     <select id="select4" style="width:100px" size="5" multiple="true">  
76.         <option value="4">number 4</option>  
77.         <option value="5">number 5</option>  
78.         <option value="6">number 6</option>  
79.     </select>  
80.     <br />  
81.     <button id="appendright">右移</button>  
82.     <button id="appendrightall">全部右移</button>  
83.     <button id="appendleft">左移</button>  
84.     <button id="appendleftall">全部左移</button>  
85.     <hr />  
86.     <p>list2list测试:</p>  
87.     <label for="select5">select5</label>  
88.     <select id="select5" style="width:100px" size="5" multiple="true">  
89.         <option value="1">number 1</option>  
90.         <option value="2">number 2</option>  
91.         <option value="3">number 3</option>  
92.         <option value="4">number 4</option>  
93.         <option value="5">number 5</option>  
94.         <option value="6">number 6</option>  
95.         <option value="7">number 7</option>  
96.         <option value="8">number 8</option>  
97.         <option value="9">number 9</option>  
98.         <option value="10">number 10</option>  
99.         <option value="11">number 11</option>  
100.     </select>  
101.     <label for="select6">select6</label>  
102.     <select id="select6" style="width:100px" size="5" multiple="true">  
103.         <option value="4">number 4</option>  
104.         <option value="5">number 5</option>  
105.         <option value="6">number 6</option>  
106.     </select>  
107.     <br />  
108.     <button id="transright">右移</button>  
109.     <button id="transrightall">全部右移</button>  
110.     <button id="transleft">左移</button>  
111.     <button id="transleftall">全部左移</button>  
112. </form>  
113. </body>  
114. </html>