亲测有效,直接复制保存用浏览器打开可以实现功能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=" > "><br>
54 <input type="button" value=" < "><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=" up "><br><br>
67 <input type="button" value="down"><br>
68 </td>
69 </tr>
70 </table>