jQuery—select下拉框左右双选功能

html：

<div id="d1">
	<div id="title">选课</div>
	<div id="d3">
		    <table cellpadding="0" cellspacing="0">
				<tbody>
					<tr>
						<td>可选择的课程</td>
					        <td>&nbsp;</td>
						<td>已选择的课程</td>
					</tr>
					<tr>
						<td>
							<select id="s1" name="s1" multiple="multiple">
								<option value="zsf">嵌入式开发</option>
								<option value="xrr">中间件</option>
								<option value="hh">图形处理</option>
								<option value="Mysql">Mysql</option>
								<option value="Redis">Redis</option>
								<option value="PHP">PHP</option>
							</select>
						</td>
						<td style="padding: 0px 20px;">
						        <p><input type="button" id="b1" class="s1" value="−−>"></p>
						        <p><input type="button" id="b2" class="s1" value="−−>>"></p>
							<p><input type="button" id="b3" class="s1" value="<−−"></p>
							<p><input type="button" id="b4" class="s1" value="<<−−"></p>
						</td>
						<td>
							<select id="s2" name="s2" multiple="multiple"></select>
						</td>
					</tr>
				</tbody>
			</table>
	</div>
</div>

css：

<style type="text/css">
			#s1,
			#s2 {
				width: 150px;
				height: 220px;
				overflow-y: auto;
			}
			
			#d1 {
				width: 500px;
				height: 320px;
				background-color: #F5DEB3;
				margin: 0 auto;
			}
			
			#title {
				height: 30px;
				font-size: 24px;
				background-color: green;
				color: white;
				text-align: center;
			}
			
			#d3 {
				padding-left: 40px;
				margin-top: 10px;
			}
			
			input {
				width: 80px;
			}
</style>

js：

<script type="text/javascript">
			$(function() {
				//从左边单个添加到右边
				$('#b1').click(function() {
					$obj = $('#s1 option:selected').clone(true);
					if($obj.size() == 0) {
						alert("请至少选择一条!");
					}
					$('#s2').append($obj);
					$('#s1 option:selected').remove();
				});
				//从左边全部添加到右边
				$('#b2').click(function() {
					$('#s2').append($('#s1 option'));
				});
				//从右边单个添加到左边
				$('#b3').click(function() {
					$obj = $('#s2 option:selected').clone(true);
					if($obj.size() == 0) {
						alert("请至少选择一条!");
					}
					$('#s1').append($obj);
					$('#s2 option:selected').remove();
				});
				//从右边全部添加到左边
				$('#b4').click(function() {
					$('#s1').append($('#s2 option'));
				});

				//双击元素添加
				$('option').dblclick(function() {
					var flag = $(this).parent().attr('id');
					if(flag == "s1") {
						var $obj = $(this).clone(true);
						$('#s2').append($obj);
						$(this).remove();
					} else {
						var $obj = $(this).clone(true);
						$('#s1').append($obj);
						$(this).remove();
					}
				});

			});
</script>