jQuery实现内容左右换位

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         select{
 9             width: 100px;
10             height: 130px;
11             background-color: #cccccc;
12 
13         }
14 
15         div{
16             display: inline-block;
17         }
18 
19         input  {
20             display: block;
21             margin: 5px;
22         }
23 
24     </style>
25 
26 
27 
28 </head>
29 <body>
30 
31 <h2>select example</h2>
32 <select name="srcity" id="srcity" multiple>
33     <option value="1">Beijing</option>
34     <option value="2">Tokyo</option>
35     <option value="3">New York</option>
36     <option value="4">Berlin</option>
37     <option value="5">Paris</option>
38     <option value="6">Singapore</option>
39 </select>
40 
41 
42 <div>
43     <input type="button" value=">">
44     <input type="button" value=">>">
45     <input type="button" value="<">
46     <input type="button" value="<<">
47 </div>
48 
49 
50 
51 <select name="tarsrc" id="tarsrc" multiple>
52 
53 </select>
54 
55 
56 
57 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
58 
59 <script>
60 
61 
62     $(function () {
63         $("input[value=\">\"]").click(
64             function () {
65                 $("#tarsrc").append($("#srcity>option:selected"));
66             }
67         );
68 
69         $("input[value=\">>\"]").click(function () {
70             $("#srcity>option").appendTo($("#tarsrc"));
71         });
72 
73         $("input[value=\"<\"]").click(function () {
74             $("#srcity").append($("#tarsrc>option:selected"));
75         });
76 
77         $("input[value=\"<<\"]").click(function () {
78             $("#srcity").append($("#tarsrc>option"));
79         });
80 
81 
82 
83     });
84 
85 </script>
86 
87 
88 
89 
90 
91 </body>
92 </html>
jQuery实现内容左右换位

猜你喜欢
