SOURCE

 $(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;
        }