|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<div class=
"centent"
>
<select multiple id=
"select1"
style=
"width:130px;height:180px;"
>
<option value=
"1"
>孙克杰</option>
<option value=
"2"
>朱信宗</option>
<option value=
"3"
>杨帆</option>
<option value=
"4"
>林非比</option>
<option value=
"5"
>亚历山大</option>
<option value=
"6"
>凌峰</option>
<option value=
"7"
>宋松</option>
<option value=
"8"
>王子瑜</option>
</select>
<div class=
"span1"
>
<span id=
"add"
>右移>></span><br/>
<span id=
"add_all"
>全部>></span>
</div>
</div>
<div class=
"centent"
>
<select multiple id=
"select2"
style=
"width:130px;height:180px"
>
</select>
<div class=
"span2"
>
<span id=
"remove"
style=
"width:500px"
>左移<<</span><br/>
<span id=
"remove_all"
>全部<<</span>
</div>
</div>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<style type=
"text/css"
>
span{
border
:
1px
solid
black
;
background-color
:
#99FFFF
;
cursor
:
pointer
;
}
.centent{
width
:
200px
;
float
:
left
;
}
.span
1
{
position
:
absolute
;
top
:
350px
;
left
:
150px
;
}
#add
_all{
position
:
absolute
;
top
:
30px
;
}
.span
2
{
position
:
absolute
;
top
:
410px
;
left
:
150px
;
}
#remove_all{
position
:
absolute
;
top
:
30px
;
}
</style>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<script>
$(
function
(){
$(
"#add"
).click(
function
(){
var
$options = $(
"#select1 option:selected"
);
//获取选中的选项
$options.appendTo(
"#select2"
);
//追加到select2的select中
});
$(
"#add_all"
).click(
function
(){
var
$options = $(
"#select1 option"
);
$options.appendTo(
"#select2"
);
});
//实现双击时，右移
$(
"#select1"
).dblclick(
function
(){
var
$options = $(
"#select1 option:selected"
);
$options.appendTo(
"#select2"
);
});
$(
"#remove"
).click(
function
(){
var
$options = $(
"#select2 option:selected"
);
$options.appendTo(
"#select1"
);
});
$(
"#remove_all"
).click(
function
(){
var
$options = $(
"#select2 option"
);
$options.appendTo(
"#select1"
);
});
$(
"#select2"
).dblclick(
function
(){
var
$options = $(
"#select2 option:selected"
);
$options.appendTo(
"#select1"
);
});
});
</script>
|
本文转自 爱笑嘚蛋蛋 51CTO博客，原文链接：http://blog.51cto.com/dd118/1671376，如需转载请自行联系原作者
