首页 > Web开发 > 详细

jquery实现 批量右移

时间:2014-06-27 17:08:04      阅读:409      评论:0      收藏:0      [点我收藏+]

 

 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实现 批量右移,布布扣,bubuko.com

jquery实现 批量右移

原文:http://www.cnblogs.com/friends-wf/p/3810030.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!