两个select的内容左右移动

<div class="centent">
		<select multiple id="select1" style="width:130px;height:180px;">
			<option value="1">孙克杰</option>
			<option value="2">朱信宗</option>
			<option value="3">杨帆</option>
			<option value="4">林非比</option>
			<option value="5">亚历山大</option>
			<option value="6">凌峰</option>
			<option value="7">宋松</option>
			<option value="8">王子瑜</option>
		</select>
		<div class="span1">
			<span id="add">右移>></span><br/>
			<span id="add_all">全部>></span>
		</div>
	</div>
	<div class="centent"> 
		<select multiple id="select2" style="width:130px;height:180px">

		</select>
		<div class="span2">
			<span id="remove" style="width:500px">左移<<</span><br/>
			<span id="remove_all">全部<<</span>
		</div>
	</div>

<style type="text/css">
	span{
		border:1px solid black;
		background-color:#99FFFF;
		cursor:pointer;
	}
	.centent{
		width:200px;
		float:left;
	}
	.span1{
		position:absolute;
		top:350px;
		left:150px;
	}
	#add_all{
		position:absolute;
		top:30px;
	}
	.span2{
		position:absolute;
		top:410px;
		left:150px;
	}
	#remove_all{
		position:absolute;
		top:30px;
	}
</style>

<script>
$(function(){
	$("#add").click(function(){
		var $options = $("#select1 option:selected");//获取选中的选项
		$options.appendTo("#select2");//追加到select2的select中
	});
	$("#add_all").click(function(){
		var $options = $("#select1 option");
		$options.appendTo("#select2");
	});
	//实现双击时，右移
	$("#select1").dblclick(function(){
		var $options = $("#select1 option:selected");
		$options.appendTo("#select2");
	});

	$("#remove").click(function(){
		var $options = $("#select2 option:selected");
		$options.appendTo("#select1");
	});
	$("#remove_all").click(function(){
		var $options = $("#select2 option");
		$options.appendTo("#select1");
	});
	$("#select2").dblclick(function(){
		var $options = $("#select2 option:selected");
		$options.appendTo("#select1");
	});
});
</script>