JS实现选项的左右移动

yxfyg 2021-08-06 原文

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>选项移动</title>
 6         <script>
 7             function moveLeft(){
 8                 var leftSelect = document.getElementById("leftSelect");
 9                 var rightSelect = document.getElementById("rightSelect");
10                 var options = leftSelect.options;
11                 for(var i=0;i<options.length;i++){
12                     if(options[i].selected){
13                         rightSelect.appendChild(options[i]);
14                     }
15                 }
16             }
17             
18             function moveLeftAll(){
19                 var leftSelect = document.getElementById("leftSelect");
20                 var rightSelect = document.getElementById("rightSelect");
21                 var options = leftSelect.options;
22                 for(var i=options.length-1;i>=0;i--){
23                     rightSelect.appendChild(options[i]);
24                 }
25             }
26             
27             function moveRight(){
28                 var leftSelect = document.getElementById("leftSelect");
29                 var rightSelect = document.getElementById("rightSelect");
30                 var options = rightSelect.options;
31                 for(var i=0;i<options.length;i++){
32                     if(options[i].selected){
33                         leftSelect.appendChild(options[i]);
34                     }
35                 }
36             }
37             
38             function moveRightAll(){
39                 var leftSelect = document.getElementById("leftSelect");
40                 var rightSelect = document.getElementById("rightSelect");
41                 var options = rightSelect.options;
42                 for(var i=options.length-1;i>=0;i--){
43                     leftSelect.appendChild(options[i]);
44                 }
45             }
46         </script>
47     </head>
48     <body>
49         <table>
50             <tr>
51                 <td>
52                     <select multiple="multiple" id="leftSelect" ondblclick="moveLeft()">
53                         <option>小米手机</option>
54                         <option>华为手机</option>
55                         <option>vivo手机</option>
56                         <option>红米手机</option>
57                         <option>oppo手机</option>
58                     </select>
59                 </td>
60                 <td>
61                     <select multiple="multiple" id="rightSelect" ondblclick="moveRight()">
62                         <option>黑鲨手机</option>
63                         <option>红魔手机</option>
64                         <option>一加手机</option>
65                     </select>
66                 </td>
67             </tr>
68             <tr>
69                 <td>
70                     <input type="button" value=">>" onclick="moveLeft()"/><br/>
71                     <input type="button" value=">>>" onclick="moveLeftAll()"/>
72                 </td>
73                 <td>
74                     <input type="button" value="<<" onclick="moveRight()"/><br/>
75                     <input type="button" value="<<<" onclick="moveRightAll()"/>
76                 </td>
77             </tr>
78         </table>
79     </body>
80 </html>