<script type="text/javascript">
$(function(){
//选择id是add的span控件，执行单机事件
$("#add").click(function(){
//id为select1的列表所有被选中的option移动到id为select2的列表中
$("#select1 option:selected").appendTo("#select2")
})
$("#remove").click(function(){
$("#select2 option:selected").appendTo("#select1")
})
$("#addall").click(function(){
//id为select1的列表所有option 移动到id为select2的列表中
$("#select1 option").appendTo("#select2")
})
$("#removeall").click(function(){
$("#select2 option").appendTo("#select1")
})
//双击时移动到select2中
$("#select1").dblclick(function(){
$("option:selected").appendTo("#select2")
})
$("#select2").dblclick(function(){
$("option:selected").appendTo("#select1")
})
})
</script>
</head>
<body>
<div class="center">
<!--下拉选项多选-->
<select name=""id="select1" multiple="multiple"style="width:100px;height:160px">
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
</select>
</div>
<div class="center">
<span id="add">选择添加到右边</span><br />
<span id="addall">全部添加到右边</span><br />
<span id="remove">选择添加到左边</span><br />
<span id="removeall">全部添加到左边</span>
</div>
<div class="center">
<!--下拉选项多选-->
<select name=""id="select2" multiple="multiple"style="width:100px;height:160px">
</select>
</div>
</body>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
