SOURCE

console 命令行工具 X clear

                    
>
console
 $(function() {
        $("#add").click(function() {
            var $options = $("#hobby option:selected"); // 获取左边选中项
            $options.appendTo("#other"); // 追加到右边
        })
        $("#add_all").click(function() {
            var $options = $("#hobby option"); // 获取全部选项
            $options.appendTo("#other"); // 追加到右边
        })
        $("#hobby").dblclick(function() { // 鼠标双击事件
            var $options = $("option:selected", this); // 获取选中项
            $options.appendTo("#other"); // 追加到右边
        })

        $("#to_left").click(function() {
            var $options = $("#other option:selected"); // 获取右边选中项
            $options.appendTo("#hobby"); // 追加到左边
        })
        $("#all_to_left").click(function() {
            var $options = $("#other option"); // 获取全部选项
            $options.appendTo("#hobby"); // 追加到左边
        })
        $("#other").dblclick(function() { // 鼠标双击事件
            var $options = $("option:selected", this); // 获取选中项
            $options.appendTo("#hobby"); // 追加到左边
        })
    })
 <div class="first">
        <select multiple name="hobby" id="hobby" class="sel">
            <option value="游泳">游泳</option>
            <option value="足球">足球</option>
            <option value="篮球">篮球</option>
            <option value="跑步">跑步</option>
            <option value="滑冰">滑冰</option>
            <option value="乒乓球">乒乓球</option>
            <option value="游泳">游泳</option>
            <option value="跳远">跳远</option>
            <option value="跳高">跳高</option>
        </select>
        <div class="sd">
            <button id="add">添加>></button><br/><br/>
            <button id="add_all">全部添加>></button>
        </div>
    </div>
    <div class="second">
        <select multiple name="other" id="other" class="sel"></select>
        <div class="sd">
            <button id="to_left"><<删除</button><br/><br/>
            <button id="all_to_left"><<全部删除</button>
        </div>
    </div>
.first {
        float: left;
        font-size: 12px;
    }
    
    .second {
        padding-left: 110px;
        font-size: 12px;
    }
    
    .sel {
        width: 80px;
        height: 150px;
    }
    
    .sd {
        padding-top: 10px;
    }