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>
jquery实现 批量右移
时间： 2024-08-23 22:35:11