DOM操作和jQuery实现选项移动操作

DOM：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>DOM选项移动操作</title>
 6     <style>
 7         select {
 8              100px;
 9             height: 85px;
10         }
11 
12         div {
13             display: inline-block;
14              50px
15         }
16     </style>
17 </head>
18 <body>
19          <select id="unsel" size="5" multiple><option>Argentina</option><option>Brazil</option><option>Canada</option><option>Chile</option><option>China</option><option>Cuba</option><option>Denmark</option><option>Egypt</option><option>France</option><option>Greece</option><option>Spain</option></select>
20         <div>
21             <button onclick="move(this.innerHTML)">&gt;&gt;</button>
22             <button onclick="move(this.innerHTML)">&gt;</button>
23             <button onclick="move(this.innerHTML)">&lt;</button>
24             <button onclick="move(this.innerHTML)">&lt;&lt;</button>
25         </div>
26         <select id="sel" size="5" multiple>
27         </select>
28     <script>
29         function $(id){
30             return document.getElementById(id);
31         }
32         var unsel=null;//保存所有备选国家列表
33         var sel=[];//保存已选中的国家列表
34         window.onload=function(){
35             unsel=$("unsel").innerHTML
36                             .replace(/</?option>/g," ")
37                             .match(/[a-zA-Z]+/g);
38         }
39         function move(inner){
40             switch (inner){
41                 case "&gt;&gt;"://全部右移
42                     sel=sel.concat(unsel);
43                     unsel.length=0;
44                     sel.sort();
45                     break;
46                 case "&lt;&lt;"://全部左移
47                     unsel=unsel.concat(sel);
48                     sel.length=0;
49                     unsel.sort();
50                     break;
51                 case "&gt;"://选中项右移
52                     var opts=document.querySelectorAll("#unsel option");
53                     //从后向前遍历每个option
54                     for(var i=opts.length-1;i>=0;i--){
55                         if(opts[i].selected){
56                         //删除unsel中i位置的1个元素,直接压入sel
57                             sel.push(unsel.splice(i,1)[0]);
58                         }
59                     }
60                     sel.sort();
61                     break;
62                 case "&lt;"://选中项左移
63                     var opts=document.querySelectorAll("#sel option");
64                     for(var i=opts.length-1;i>=0;i--){
65                         if(opts[i].selected){
66                             unsel.push(sel.splice(i,1)[0]);
67                         }
68                     }
69                     unsel.sort();
70                     break;
71             }
72             show();
73         }
74         function show(){//将两个数组，更新到select元素中
75             $("unsel").innerHTML="<option>"
76                                 +unsel.join("</option><option>")
77                                 +"</option>";
78             $("sel").innerHTML="<option>"
79                                 +sel.join("</option><option>")
80                                 +"</option>";
81         }
82     </script>
83 </body>
84 </html>

jquery:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>选项移动操作</title>
 6     <script src="jquery.min.js"></script>
 7     <style>
 8         select {
 9              100px;
10             height: 85px;
11         }
12 
13         div {
14             display: inline-block;
15              50px
16         }
17     </style>
18 </head>
19 <body>
20     <select id="first" size="5" multiple>
21         <option>Argentina</option>
22         <option>Brazil</option>
23         <option>Canada</option>
24         <option>Chile</option>
25         <option>China</option>
26         <option>Cuba</option>
27         <option>Denmark</option>
28         <option>Egypt</option>
29         <option>France</option>
30         <option>Greece</option>
31         <option>Spain</option>
32     </select>
33     <div>
34         <button id="add">&gt;</button>
35         <button id="add_all">&gt;&gt;</button>
36         <button id="remove">&lt;</button>
37         <button id="remove_all">&lt;&lt;</button>
38     </div>
39     <select id="second" size="5" multiple>
40     </select>
41 
42     <script>
43             $("#add").click(function(){
44                 // 将左边被选中的选项,移到右边去
45                 $("#first>option:selected").appendTo($("#second"));
46             });
47             $("#add_all").click(function(){
48                 $("#first>option").appendTo($("#second"));
49             });
50             $("#remove").click(function(){
51                 $("#second>option:selected").appendTo($("#first"));
52             });
53             $("#remove_all").click(function(){
54                 $("#second>option").appendTo($("#first"));
55             });
56             // 双击事件
57             $("#first").dblclick(function(){
58                 $("#first>option:selected").appendTo($("#second"));
59             });
60             $("#second").dblclick(function(){
61                 $("#second>option:selected").appendTo($("#first"));
62             });
63     </script>
64 </body>
65 </html>

相关阅读:
使用goto跳转到switch的某个case 拓荒者
 sql server 跨服务器查询拓荒者
 [转]ASP.NET 缓存：方法和最佳实践拓荒者
 asp.net gridview 和 repeater 模板代码示例拓荒者
 【转】配置子目录Web.config使其消除继承，用虚拟目录创建多个网站的方法拓荒者
 PostSharp Thread Dispatching（GUI多线程）
Silverlight获取WebHost配置信息WebClient和XmlSerializer模拟
 Google Chrome 語音辨識
 MSBuild + MSILInect实现编译时AOP之预览
 Silverlight DataGrid行背景分组着色
原文地址：https://www.cnblogs.com/rion1234567/p/5566415.html