jQuery练习4--下拉框应用 

 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="width: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="width: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>

 

 

 

 

posted @ 2013-05-10 16:16  hacket520  阅读(302)  评论(0)  编辑  收藏  举报