JSDom——列表选中移动篇

最新推荐文章于 2024-08-01 15:12:32 发布

转载最新推荐文章于 2024-08-01 15:12:32 发布 · 549 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/H_Razor/archive/2011/03/21/1990673.html

文章标签：

#xhtml #javascript #ViewUI

该博客转载自https://www.cnblogs.com/H_Razor/archive/2011/03/21/1990673.html ，原内容可能与xhtml和javascript相关，涉及前端开发领域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

以下为具体的实现方式：

①
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