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中元素减少，而检测元素的下标就会从移走的后的下标直接往后移动检测，
如果不进行减操作会导致每次都遗留一个元素，这并不符合我们的理想效果
从反向的移动中我们可以看到选项不会像以前正常排序，希望如果有想法的老牛们给些提示，希望大家在本文中可以学到写东西，共同交流。
本文版权所有，转载请注明出处！