jQuery：实现两个<select>控件的互移操作

一、直接上代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8" />
 5   <title>index</title>
 6 </head>
 7 <body>
 8     <div>
 9         <select id="leftSelector" multiple="multiple" name="SmsListOnLeft" style="height:100px; width:50px">
10             <option value="0">0</option>
11             <option value="1">1</option>
12             <option value="2">2</option>
13             <option value="3">3</option>
14             <option value="4">4</option>
15             <option value="5">5</option>
16         </select>
17 
18         <span style="top: 30px; position: fixed;">
19             <input type="button" value="<<" id="btnLeft" />
20             <input type="button" value=">>" id="btnRight" />
21         </span>
22         
23         <select id="rightSelector" multiple="multiple" name="SmsListOnRight" style="height:100px; width:50px; margin-left:80px">
24             <option value="6">A</option>
25             <option value="7">B</option>
26             <option value="8">C</option>
27             <option value="9">D</option>
28             <option value="10">E</option>
29         </select>
30                 
31     </div>
32     
33     <br>
34     
35     <input type="button" onclick="selectAll()" id="btnSelectAll" value="selectAll" />
36     
37     <script src="js/jquery-2.1.4.js"></script>
38     <script>
39         $("#btnRight").click(function () {
40             //数据option选中的数据集合赋值给变量vSelect
41             var vSelect = $("#leftSelector option:selected");
42             //克隆数据添加到 rightSelector 中
43             vSelect.clone().appendTo("#rightSelector");
44             //同时移除 leftSelector 中的 option
45             vSelect.remove();
46         });
47         
48         //right move
49         $("#btnLeft").click(function () {
50             var vSelect = $("#rightSelector option:selected");
51             vSelect.clone().appendTo("#leftSelector");
52             vSelect.remove();
53         });
54 
55         function selectAll() {
56             var lst1 = window.document.getElementById("rightSelector");
57             var length = lst1.options.length;
58             for (var i = 0; i < length; i++) {
59                 var v = lst1.options[i].value;    //option内的value
60                 var t = lst1.options[i].text;    //显示的文本
61                 alert(v + ":" + t);
62             }
63         }
64     </script>
65     
66 </body>
67 </html>