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