实现多重选项点选添加
效果描述
左边是【多选框1】,显示所有选项,可以点击选中1个或多个(选中多个需要按住Ctrl键)。右边是【多选框2】,初始没有任何选项。
点击【添加】按钮,【多选框1】中选中的选项消失,添加到【多选框2】中。
点击【全部添加】按钮,【多选框1】中选中的选项全部消失,全部添加到【多选框2】中。
点击【移除】按钮,【多选框2】中选中的选项消失,添加到【多选框1】中。
点击【全部移除】按钮,【多选框2】中选中的选项全部消失,全部添加到【多选框1】中。
HTML代码
<!--多选框1-->
<select multiple="multiple" class="multiSelect" id="nochoose">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
</select>
<!--按钮div-->
<div class="buttondiv">
<input type="button" value="添加" id="add"/>
<input type="button" value="全部添加" id="addall"/>
<input type="button" value="删除" id="deleteone"/>
<input type="button" value="全部删除" id="deleteall"/>
</div>
<!--多选框2-->
<select multiple="multiple" class="multiSelect" id="hadchoose">
</select>
JQ代码
<!--导入JQ包-->
<script src="jquery.js"></script>
<script>
// 选项转移的方法
// choose:选中的每一项<option>
// target:被添加的目标<select>
function move(choose,target){
choose.append(target);
}
// $(function(){文档加载完成后执行这里的代码})
// 选择器.click(function(){为选中的对象添加点击事件})
// $("#Id名"),选择对应Id名的对象
$(function(){
$("#add").click(function(){
move($("#nochoose option:selected"),$("#hadchoose"));
})
$("#addall").click(function(){
move($("#nochoose option"),$("#hadchoose"));
})
$("#deleteone").click(function(){
move($("#hadchoose option:selected"),$("#nochoose"));
})
$("#deleteall").click(function(){
move($("#hadchoose option"),$("#nochoose"));
})
})
</script>
CSS代码
<style>
.multiSelect{
width: 60px;
height: 100px;
float: left;
}
.buttondiv{
width: 80px;
height: 100px;
float: left;
}
.buttondiv input{
width: 80px;
}
</style>
总结
要点1
使用<select>标签
属性:
multiple
要点2
抽出move方法减少重复代码
要点3
使用JQ中的each(callback)方法来为每一个<option>添加move方法。
要点4
使用$(function(){代码})
的方法,在文档加载完成后为按钮添加方法