一個簡單的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>