1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5 <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
6 </head>
7 <body>
8 <select style="60px" multiple size="10" id="leftID">
9 <option>选项A</option>
10 <option>选项B</option>
11 <option>选项C</option>
12 <option>选项D</option>
13 <option>选项E</option>
14 <option>选项F</option>
15 <option>选项G</option>
16 <option>选项H</option>
17 <option>选项I</option>
18 <option>选项J</option>
19 </select>
20 </div>
21 <div style="position:absolute;left:100px;top:60px">
22 <input type="button" value="批量右移" id="rightMoveID"/>
23 </div>
24 <div style="position:absolute;left:100px;top:90px">
25 <input type="button" value="全部右移" id="rightMoveAllID"/>
26 </div>
27 <div style="position:absolute;left:220px;top:20px">
28 <select multiple size="10" style="60px" id="rightID">
29 </select>
30 </div>
31 </body>
32 <script type="text/javascript">
33 //下拉框应用
34 //1、双击右移
35 //$("select").change(function(){
36 // alert("改变了");
37 //}); change()函数要站在select角度来看
38 /*$("leftID").dblclick(function(){ //又是没有加#号
39 alert("双击了");
40 });*/
41 $("#leftID").dblclick(function(){
42 //alert("双击了");
43 $("#rightID").append($("select option:selected"));
44 });
45 //2、批量右移
46 $("#rightMoveID").click(function(){ //id进行定位记得加上#号
47 //alert("rightMoveID");
48 $("#rightID").append($("select option:selected"));
49 });
50 //3、全部右移
51 $("#rightMoveAllID").click(function(){
52 //alert("rightMoveAllID");
53 //$("#rightID").append($("select option"));
54 $("#rightID").append($("option"));
55 })
56 </script>
57 </html>
by hacket
