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"); 
            })
        })

<h3>选择喜欢的运动添加</h3>
    <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;
        }