城市左右选择添加按钮案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>04-jQuery-城市选择案例</title>
 6     <style type="text/css" media="screen">
 7         select {
 8             width: 200px;
 9             background-color: teal;
10             height: 200px;
11             font-size: 20px;
12         }
13         /**把大盒子的宽度变小了，内容自然垂直排列**/
14         .btn-box {
15             width: 30px;
16             display: inline-block;
17             vertical-align: top;
18         }
19     </style>
20     <script src="jquery-1.11.3.js"></script>
21     <script>
22         // $(function(){
23         //     $("#btn-sel-none").on('click',function(){
24         //         $("#tar-city option").appendTo('#src-city');
25         //     });
26 
27         //     $("#btn-sel-all").on('click',function(){
28         //         $("#src-city option").appendTo('#tar-city');
29         //     });
30         //     $("#btn-sel").on('click',function(){
31         //         $("#src-city option:selected").appendTo('#tar-city');
32         //     });
33         //     $("#btn-back").on('click',function(){
34         //         $("#tar-city option:selected").appendTo('#src-city');
35         //     });
36         // });
37 
38 
39         $(function(){
40             $("#btn-sel-all").on('click',function(){
41                 //把所有的 城市从左边 移动到右边select中
42                 $("#src-city option").appendTo("#tar-city");
43             });
44             $("#btn-sel-none").on('click',function(){
45                 //把所有的 城市从左边 移动到右边select中
46                 $("#tar-city option").appendTo("#src-city");
47             });
48             $("#btn-sel").on('click',function(){
49                 //把所有的 城市从左边 移动到右边select中
50                 $("#src-city option:selected").appendTo("#tar-city");
51             });
52 
53             $("#btn-back").on('click',function(){
54                 //把所有的 城市从左边 移动到右边select中
55                 $("#tar-city option:selected").appendTo("#src-city");
56             });
57         });
58     </script>
59 </head>
60 <body>
61      <select id="src-city" name="src-city" multiple>
62          <option value="1">北京</option>
63          <option value="2">上海</option>
64          <option value="3">深圳</option>
65          <option value="4">广州</option>
66          <option value="5">西红柿</option>
67      </select>
68     <div class="btn-box">
69         <button id="btn-sel-all"> &gt;&gt; </button>
70         <button id="btn-sel-none"> &lt;&lt; </button>
71         <button id="btn-back"> &lt; </button>
72         <button id="btn-sel"> &gt;</button>
73     </div>
74 
75      <select id="tar-city" name="tar-city" multiple>
76 
77      </select>
78 </body>
79 </html>