首页 > 代码库 > jQuery实现左移右移

jQuery实现左移右移

 1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>完成左移右移</title> 5 <script src="http://www.mamicode.com/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=http://www.mamicode.com/‘‘>"+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=http://www.mamicode.com/‘‘>"+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="http://www.mamicode.com/>>"/>43             <input type="button" id="b2" value="http://www.mamicode.com/<<"/>        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实现左移右移