JQ实现选项左右移动 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>选项左右移动</title>
 6         <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
 7         <script>
 8             $(function(){
 9                 $(":button:first").click(function(){
10                     $("#leftSelect option:selected").appendTo($("#rightSelect"));
11                 });
12                 
13                 $(":button:nth-child(3):first").click(function(){
14                     $("#leftSelect option").appendTo($("#rightSelect"));
15                 });
16                 
17                 $(":button:nth-child(1):last").click(function(){
18                     $("#rightSelect option:selected").appendTo($("#leftSelect"));
19                 });
20                 
21                 $(":button:last").click(function(){
22                     $("#rightSelect option").appendTo($("#leftSelect"));
23                 });
24             });
25         </script>
26     </head>
27     <body>
28         <table>
29             <tr>
30                 <td>
31                     <select multiple="multiple" id="leftSelect">
32                         <option>小米手机</option>
33                         <option>华为手机</option>
34                         <option>vivo手机</option>
35                         <option>红米手机</option>
36                         <option>oppo手机</option>
37                     </select>
38                 </td>
39                 <td>
40                     <select multiple="multiple" id="rightSelect">
41                         <option>黑鲨手机</option>
42                         <option>红魔手机</option>
43                         <option>一加手机</option>
44                     </select>
45                 </td>
46             </tr>
47             <tr>
48                 <td>
49                     <input type="button" value=">>"/><br/>
50                     <input type="button" value=">>>"/>
51                 </td>
52                 <td>
53                     <input type="button" value="<<"/><br/>
54                     <input type="button" value="<<<"/>
55                 </td>
56             </tr>
57         </table>
58     </body>
59 </html>

 

posted @ 2020-04-11 10:37  yxfyg  阅读(516)  评论(0)    收藏  举报