JSDom——列表选中移动篇
这个列表选中移动呢，灵感来自淘宝，在淘宝注册店铺的过程中，会涉及到选择分类，而其选择方式呢，就是如下效果：
以下为具体的实现方式：
①
HTML源码：
HTML源码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
6 <title>无标题文档</title>
7 </head>
8 <body>
9 <span>
10 <select id="left" multiple="multiple" style="width: 80px; height:120px; background:#CCC;">
11 <option>1</option>
12 <option>2</option>
13 <option>3</option>
14 <option>4</option>
15 <option>5</option>
16 <option>6</option>
17 </select>
18 <input type="button" value="→" id="forR"/>
19 <input type="button" value="More→" id="MforR"/>
20 <input type="button" value="←"/ id="forL">
21 <input type="button" value="More←" id="MforL"/>
22 <select id="right" multiple="multiple" style="width:80px; height:120px; background:#CCC;">
23
24 </select>
25 </span>
26 </body>
27 <script type="text/javascript" src="move.js"></script>
28 </html>
网页中有六个元素：
4个按钮，两个select框
② JavaScript源码：
1 /*获得四个按钮的节点对象*/
2 var forR = document.getElementById("forR");
3 var MforR = document.getElementById("MforR");
4 var forL = document.getElementById("forL");
5 var MforL = document.getElementById("MforL");
6 /*单项左向右移动*/
7 forR.onclick = function (){
8 //获得两个select框元素节点
9 var left = document.getElementById("left");
10 var right = document.getElementById("right");
11 //获得所有选项元素
12 var loptions = left.options;
13 //遍历所有选项对象
14 for(var i=0;i<loptions.length;i++){
15 var op = loptions[i];
16 //如果选项被选中则将该元素添加到右边的选择框中、也就是移动
17 if(op.selected){
18 right.appendChild(op);
19 break;
20 }
21 }
22 }
23 /*多项左向右移动*/
24 MforR.onclick = function(){
25 //获得两个select框元素节点
26 var left = document.getElementById("left");
27 var right = document.getElementById("right");
28 //获得所有选项元素
29 var loptions = left.options;
30 //遍历所有选项对象
31 for(var i=0;i<loptions.length;i++){
32 var op = loptions[i];
33 //如果选项被选中则将该元素添加到右边的选择框中、也就是移动
34 if(op.selected){
35 right.appendChild(op);
36 i--;
37 }
38 }
39 }
40 /*单项右往左移动*/
41 forL.onclick = function (){
42 //获得两个select框元素节点
43 var left = document.getElementById("left");
44 var right = document.getElementById("right");
45 //获得所有选项元素
46 var roptions = right.options;
47 //遍历所有选项对象
48 for(var i=0;i<roptions.length;i++){
49 var op = roptions[i];
50 //如果选项被选中则将该元素添加到右边的选择框中、也就是移动
51 if(op.selected){
52 left.appendChild(op);
53 break;
54 }
55 }
56 }
57 /*多向右往左移动*/
58 MforL.onclick = function(){
59 //获得两个select框元素节点
60 var left = document.getElementById("left");
61 var right = document.getElementById("right");
62 //获得所有选项元素
63 var roptions = right.options;
64 //遍历所有选项对象
65 for(var i=0;i<roptions.length;i++){
66 var op = roptions[i];
67 //如果选项被选中则将该元素添加到右边的选择框中、也就是移动
68 if(op.selected){
69 left.appendChild(op);
70 i--;
71 }
72 }
73 }
注意：
1.在以上的脚本代码中我们可以看到当单个元素移动时利用break结束了循环，这是为了保证每次即使多选也只移动一个元素，循环也就只执行一次
2.在多个选中项的移动中，当检测到选中元素并移走后select中元素减少，而检测元素的下标就会从移走的后的下标直接往后移动检测，
如果不进行减操作会导致每次都遗留一个元素，这并不符合我们的理想效果
从反向的移动中我们可以看到选项不会像以前正常排序，希望如果有想法的老牛们给些提示，希望大家在本文中可以学到写东西，共同交流。
本文版权所有，转载请注明出处！
