在这个小的复习里面，一个简单的要注意的点就是，对于下拉选单的内容的筛选，是通过：selected来实现的，一定将这个内容和多选框的attr("checked")区分开。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var opArea = $("div.dSelectOpArea");
opArea.find(".dSelectAllRight").click(function(){
$("#select1 option").remove().appendTo($("#select2"));
});
opArea.find(".dSelectAllLeft").click(function(){
$("#select2 option").remove().appendTo($("#select1"));
});
opArea.find(".dSelectOneRight").click(function(){
$("#select1 option:selected").remove().appendTo($("#select2"));
});
opArea.find(".dSelectOneLeft").click(function(){
$("#select2 option:selected").remove().appendTo($("#select1"));
});
})
</script>
<style type="text/css">
div.dSelectOpArea{
height:120px;
width:60px;
}
div.dSelectOpArea button{
width:60px;
margin-top:5px;
}
table.dbSelectContainer{
width:240px;
height:120px;
}
#select1,#select2{
width:80px;
height:120px;
}
</style>
</head>
<body>
<form action="#">
<table class="dbSelectContainer">
<tr>
<td>
<select multiple="multiple" id="select1">
<option value="oracle">oracle</option>
<option value="java">java</option>
<option value="english">english</option>
<option value="pmp">pmp</option>
<option value="javascript">javascript</option>
<option value="php">php</option>
<option value="Xplatform">Xplatform</option>
</select>
</td>
<td>
<div class="dSelectOpArea">
<button class="dSelectAllRight">>></button>
<button class="dSelectAllLeft"><<</button>
<button class="dSelectOneRight">></button>
<button class="dSelectOneLeft"><</button>
</div>
</td>
<td>
<select multiple="multiple" id="select2">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
jQuery_review之jQuery实现左右多选内容交换,布布扣,bubuko.com
jQuery_review之jQuery实现左右多选内容交换
原文：http://blog.csdn.net/ziwen00/article/details/38129237