<table>
<tr>
<td>
<select multiple="multiple" id="leftSelect">
<optgroup label="可选择">
<option value="1">1111</option>
<option value="2">2222</option>
<option value="3">3333</option>
<option value="4">4444</option>
</optgroup>
</select>
</td>
<td>
<span href="javascript:;" class="moveBtn" from="#leftSelect" to="#rightSelect">右移</span>
<br />
<br />
<span href="javascript:;" class="moveBtn" from="#rightSelect" to="#leftSelect">左移</span>
</td>
<td>
<select multiple="multiple" id="rightSelect">
<optgroup label="可用"></optgroup>
</select>
</td>
</tr>
</table>
<script>
$(function () {
$(".moveBtn").click(function () {
var from = $($(this).attr("from"));
var to = $($(this).attr("to"));
var selected = from.find(":selected").attr("selected", false).toArray();
var option = to.find("option").toArray();
var arr = selected.concat(option).sort(function (a, b) { return a.value - b.value });
to.find("optgroup").append(arr);
});
});
</script>