JSDom——列表选中移动篇

这个列表选中移动呢，灵感来自淘宝，在淘宝注册店铺的过程中，会涉及到选择分类，而其选择方式呢，就是如下效果：

以下为具体的实现方式：

①  
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中元素减少，而检测元素的下标就会从移走的后的下标直接往后移动检测，

　　如果不进行减操作会导致每次都遗留一个元素，这并不符合我们的理想效果

　　

　　从反向的移动中我们可以看到选项不会像以前正常排序，希望如果有想法的老牛们给些提示，希望大家在本文中可以学到写东西，共同交流。

本文版权所有，转载请注明出处！

转载于:https://www.cnblogs.com/H_Razor/archive/2011/03/21/1990673.html