<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function() {
//点击"添加"事件
$("#add").click(function() {
$("#selectLeft :selected").appendTo("#selectRight");
});
//点击"添加全部"事件
$("#addAll").click(function() {
$("#selectLeft option").appendTo("#selectRight");
});
//点击"删除"事件
$("#remove").click(function() {
$("#selectRight :selected").appendTo("#selectLeft");
});
//点击"删除全部"事件
$("#removeAll").click(function() {
$("#selectRight option").appendTo("#selectLeft");
});
//双击左选择框事件
$("#selectLeft").dblclick(function() {
$("#selectLeft :selected").appendTo("#selectRight");
});
//双击右选择框事件
$("#selectRight").dblclick(function() {
$("#selectRight :selected").appendTo("#selectLeft");
});
});
</script>
<!-- CSS -->
<style type="text/css">
.content {
position: absolute;
top: 10px;
width: 170px;
text-align: center;
}
select {
height: 160px;
width: 150px;
}
</style>
</head>
<!-- HTML -->
<body>
<div class="content">
<select id="selectLeft" multiple="multiple">
<option value="1">AAAAAAAAAAA</option>
<option value="2">BBBBBBBBBBB</option>
<option value="3">SSSSSSSSSSS</option>
<option value="4">KKKKKKKKKKK</option>
<option value="5">EEEEEEEEEEE</option>
<option value="6">VVVVVVVVVVV</option>
<option value="7">XXXXXXXXXXX</option>
<option value="8">YYYYYYYYYYY</option>
</select>
<div>
<button id="add">添加选中项到右边>></button><br />
<button id="addAll">添加全部项到右边>></button>
</div>
</div>
<div class="content" style="left: 180px;">
<select id="selectRight" multiple="multiple"></select>
<div>
<button id="remove"><<删除选中项到左边</button><br />
<button id="removeAll"><<删除全部项到左边</button>
</div>
</div>
</body>
</html>
