jQuery实现向左向右单移动全移动,向上向下功能

 亲测有效,直接复制保存用浏览器打开可以实现功能1
1 <head> 2 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 3 <script> 4 $(function(){ 5 //单选(向右移动数据) 6 $(":button:eq(1)").bind("click",function(){ 7 $("select:eq(0) :selected").appendTo($("select:eq(1)")); 8 }); 9 //单选(向左移动数据) 10 $(":button:eq(2)").bind("click",function(){ 11 $("select:eq(1) :selected").appendTo($("select:eq(0)")); 12 }); 13 /* 14 //全选(向右移动数据) 15 $(function(){ 16 $(":button:eq(0)").bind("click",function(){ 17 $("#One option").appendTo($("#two")); 18 }); 19 }); 20 */ 21 //全选(向右移动数据) 22 $(":button:eq(0)").bind("click",function(){ 23 $("select:eq(0) option").appendTo($("select:eq(1)")); 24 }); 25 //全选(向左移动数据) 26 $(":button:eq(3)").bind("click",function(){ 27 $("#two option").appendTo($("#One")); 28 }); 29 //向上走 30 $(":button:eq(4)").click(function(){ 31 $("select:eq(1) :selected").insertBefore($("select:eq(1) :selected").prev()); 32 }); 33 //向下走 34 $(":button:eq(5)").click(function(){ 35 $("select:eq(1) :selected").insertAfter($("select:eq(1) :selected").next()); 36 }); 37 }); 38 </script> 39 </head> 40 <table> 41 <tr> 42 <td> 43 <!--multiple设定下拉框可以多选,size设定下拉框不呈现下拉方式,--> 44 <select size="12" > 45 <option>苹果</option> 46 <option>香蕉</option> 47 <option>草莓</option> 48 <option>橘子</option> 49 </select> 50 </td> 51 <td> 52 <input type="button" value=">>>"><br> 53 <input type="button" value="&nbsp;>&nbsp;"><br> 54 <input type="button" value="&nbsp;<&nbsp;"><br> 55 <input type="button" value="<<<"><br> 56 57 </td> 58 <td> 59 <select size="12" > 60 <option>葡萄</option> 61 </select> 62 63 </td> 64 65 <td> 66 <input type="button" value="&nbsp;up&nbsp;"><br><br> 67 <input type="button" value="down"><br> 68 </td> 69 </tr> 70 </table>