JQuery，实现双击下拉框选项时，将选项添加到右侧下拉框，双击右侧下拉框时，将选项添加到左侧下拉框

转自：http://zhidao.baidu.com/question/401258354.html?seed=0

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
		<title>DOM</title>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#select1").dblclick(function(){
					var $option = $("#select1 option:selected");
					$option.appendTo("#select2");
				});
				
				$("#addAll").click(function(){
					$("#select1 option").appendTo("#select2");
				});
				
				$("#select2").dblclick(function(){
					var $option = $("#select2 option:selected");
					$option.appendTo("#select1");
				});
				
				$("#removeAll").click(function(){
					$("#select2 option").appendTo("#select1");
				});
			})
		</script>
		<style type="text/css">
			.content{
				width: 100px;
				height: 160px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="content ">
			<select multiple="multiple" id="select1">
				<option>选项1</option>
				<option>选项2</option>
				<option>选项3</option>
				<option>选项4</option>
				<option>选项5</option>
				<option>选项6</option>
				<option>选项7</option>
				<option>选项8</option>
			</select>
			
			<div>
				<span id="addAll">Add All>></span>
			</div>
		</div>
		
		<div class="content">
			<select multiple="multiple" id="select2"></select>
			
			<div>
				<span id="removeAll">Remove All>></span>
			</div>
		</div>
	</body>
</html>