一个简单的jquery左右列表内容切换应用

选中左边某个选项点击添加，即可将选中项添加到右边文本框中，点击选中全部即可将全部选项移到右边，移除按钮功能相同。

html代码：

<div id="main">
    <div id="left">
        <div id="select1" class="sel">
            <span>apple</span>
            <span>huawei</span>
            <span>htc</span>
            <span>samsung</span>
        </div>
        <button id="add" value="选中添加">选中添加</button><br>
        <button id="add_all" value="选中全部">选中全部</button>
    </div>
    <div id="right">
        <div id="select2" class="sel">
            
        </div>
        <button id="remove" value="移除添加">移除添加</button><br>
        <button id="remove_all" value="移除全部">移除全部</button>
    </div>
</div>

css：

<style type="text/css">
        .sel{
            width: 100px;
            height: 160px;
            border:1px solid black;
        }
        span{
            display: block;
        }
        #left,#right{
            float: left;
            border:1px solid black;
            margin-right: 20px;
        }
        .light{
            background-color: blue;
        }
    </style>

jquery：

<script type="text/javascript">
    $('span').click(function(){
        $(this).addClass("light").siblings().removeClass("light"); //当点击span标签时为它添加高亮样式light，并移除除选中项外的其他同级标签的light属性；
    });
    $("#add").click(function(){
        var options=$("#select1>.light");//获取选中项；
        options.removeClass("light").appendTo("#select2"); //将该span标签的light属性移除并移到右边；

    });
    $("#add_all").click(function(){
        var options=$("#select1 span");
        options.appendTo("#select2");
    });
    $("#remove").click(function(){
        var options=$(".light");
        options.removeClass("light").appendTo("#select1");
    });
    $("#remove_all").click(function(){
        var options=$("#select2 span");
        options.appendTo("#select1");
    });
</script>