码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现左移右移

时间:2016-09-28 15:54:01      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:

 1 <html>
 2 <head>
 3 <meta charset="utf-8">
 4 <title>完成左移右移</title>
 5 <script src="jquery.js"></script>
 6 <style type="text/css">
 7     table{background-color:purple;}
 8     input{background-color:blue;}
 9 </style>
10 <script language="javascript">
11     $("document").ready(function(){
12         $("#b1").click(function(){
13             var v1=$("#k1").find("option:selected").text();
14             if(v1!=null){
15                 $("#k2").append("<option value=‘‘>"+v1+"</option>");
16                 $("#k1 option:selected").remove()
17             }    
18         });    
19         
20         $("#b2").click(function(){
21             var v2=$("#k2").find("option:selected").text();
22             if(v2!=null){
23                 $("#k1").append("<option value=‘‘>"+v2+"</option>");
24                 $("#k2 option:selected").remove();
25             }
26         });
27     });
28 </script>    
29 </head>
30 <body>
31 <form action="#" method="post">
32 <table>
33     <tr>
34         <td>
35             <select id="k1" size="10" style="width:200px;">
36                 <option id="p1">柠檬学院</option>
37                 <option id="p2">柠檬学员</option>
38                 <option id="p3">柠檬人</option>
39             </select>
40         </td>
41         <td>
42             <input type="button" id="b1" value=">>"/>
43             <input type="button" id="b2" value="<<"/>        
44         </td>
45         <td>
46             <select id="k2" size="10" style="width:200px;">
47                 <option>李哥</option>                
48             </select>
49         </td>
50     </tr>
51 </table>
52 </form>    
53 </body>
54 </html>

技术分享

jQuery实现左移右移

标签:

原文地址:http://www.cnblogs.com/biehongli/p/5916155.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!