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