<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.content{margin:10px;}
</style>
</head>
<body>
<div>
<div class="content" style="float:left;">
<select id="select1" multiple="multiple" style="width: 120px;height: 160px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
<option value="8">选项8</option>
</select>
<div>
<span id="add">选中添加到右边>></span><br/>
<span id="add_all">全部添加到右边>></span>
</div>
</div>
<div class="content" style="float:left;">
<select id="select2" multiple="multiple" style="width: 120px;height: 160px;">
</select>
<div>
<span id="remove">选中删除到左边<<</span><br />
<span id="remove_all">全部删除到左边<<</span>
</div>
</div>
<div style="clear:both"></div>
<div>上一个div的作用，是不允许和上面的两个浮动元素同一行</div>
</div>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$("#add").click(function () {
var $option = $("#select1 option:selected");
var $remove = $option.remove();
$remove.appendTo("#select2");
//option排序
$("#select2 :nth-child(all)").sort(function (a, b) {
var aText = $(a).text().toUpperCase();
var bText = $(b).text().toUpperCase();
if (aText > bText) return 1;
if (aText < bText) return -1;
return 0;
}).appendTo("#select2");
});
$("#add_all").click(function () {
var $option = $("#select1 :nth-child(all)");
var $option1 = $option.attr("selected", true);
$option.appendTo("#select2");
});
$("#remove").click(function () {
var $option = $("#select2 option:selected");
var $remove = $option.remove();
$remove.appendTo("#select1");
});
$("#remove_all").click(function () {
var $option = $("#select2 :nth-child(all)");
var $option1 = $option.attr("selected", true);
$option.appendTo("#select1");
});
</script>
</body>
</html>
