实现多重选项点选添加

实现多重选项点选添加

效果描述

左边是【多选框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(){代码})的方法，在文档加载完成后为按钮添加方法