select不支持双击dbclick事件
XML/HTML Code
复制内容到剪贴板
<div class="centent" style="width:200px; float:left; margin-right:20px;">
<
select
multiple
=
"multiple"
id
=
"select1"
style
=
"width:150px; height:160px;"
>
<
option
value
=
"1"
>
选项1
</
option
>
<
option
value
=
"2"
>
选项2
</
option
>
<
option
value
=
"3"
>
选项3
</
option
>
<
option
value
=
"4"
>
选项4
</
option
>
<
option
value
=
"5"
>
选项5
</
option
>
</
select
>
<
div
>
<
span
id
=
"add"
style
=
"display:block; width:140px; cursor:pointer;"
>
选中添加到右边
>
>
</
span
>
<
span
id
=
"addAll"
style
=
"display:block; width:140px; cursor:pointer;"
>
全部添加到右边
>
>
</
span
>
</
div
>
</
div
>
<
div
class
=
"centent"
style
=
"width:200px; float:left; margin-right:20px;"
>
<
select
multiple
=
"multiple"
id
=
"select2"
style
=
"width:150px; height:160px;"
>
</
select
>
<
div
>
<
span
id
=
"add1"
style
=
"display:block; width:140px; cursor:pointer;"
>
<
<
选中删除到左边
</
span
>
<
span
id
=
"addAll1"
style
=
"display:block; width:170px; cursor:pointer;"
>
<
<
全部选中删除到左边
</
span
>
</
div
>
</
div
>
JavaScript Code
复制内容到剪贴板
<script type="text/javascript">
//下拉框多选的应用 9：57
$(
function
(){
//开始把左边的添加到右边
$(
"#add"
).click(
function
(){
//把选中的添加到右边
$option = $(
"#select1 option:selected"
);
$option.appendTo(
"#select2"
);
})
$(
"#addAll"
).click(
function
(){
//全部添加到右边
$option = $(
"#select1 option"
);
$option.appendTo(
"#select2"
);
})
$(
"#select1"
).dbclick(
function
(){
//双击添加到右边
$option = $(
"#select1 option:selected"
,
this
);
$option.appendTo(
"#select2"
);
})
//开始右边的添加到左边
$(
"#add1"
).click(
function
(){
//把选中的添加到左边
$option = $(
"#select2 option:selected"
);
$option.appendTo(
"#select1"
);
})
$(
"#addAll1"
).click(
function
(){
//全部添加到左边
$option = $(
"#select2 option"
);
$option.appendTo(
"#select1"
);
})
$(
"#select2"
).dbclick(
function
(){
//双击添加到左边
$option = $(
"option:selected"
,
this
);
$option.appendTo(
"#select1"
);
})
})
</script>
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
