jquery实现批量右移

浏览数：16 / 时间：2015年06月09日

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 5     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
 6   </head>
 7   <body>
 8       <div>    
 9           <select style="width:60px" multiple size="10" id="leftID">
10               <option>选项A</option>
11               <option>选项B</option>
12               <option>选项C</option>
13               <option>选项D</option>
14               <option>选项E</option>
15               <option>选项F</option>
16               <option>选项G</option>
17               <option>选项H</option>
18               <option>选项I</option>
19               <option>选项J</option>
20           </select>
21       </div>
22       <div style="position:absolute;left:100px;top:60px">
23           <input type="button" value="批量右移" id="rightMoveID"/>
24       </div>
25       <div style="position:absolute;left:100px;top:90px">
26           <input type="button" value="全部右移" id="rightMoveAllID"/>
27       </div>
28       <div style="position:absolute;left:220px;top:20px">    
29           <select multiple size="10" style="width:60px" id="rightID">
30           </select>
31       </div>
32   </body>
33   <script type="text/javascript">
34       //双击右移
35       $("#leftID").dblclick(function(){
36           $("#rightID").append(  $("#leftID option:selected")  );
37       });
38       //全部右移
39       $("#rightMoveAllID").click(function(){
40           $("#rightID").append(  $("#leftID option")  );
41       });
42       //批量右移
43       $("#rightMoveID").click(function(){
44           $("#rightID").append(   $("#leftID option:selected")  );
45       });
46   </script>
47 </html>