jQuery下拉框应用选择

<style type="text/css">
     .selectc{
     	float: left;
     }
     .button1{
     	float: left;
     	width: 120px;
        height: 200px;
     }
	     button{
	     	width: 120px;
	     }
</style>

<div>
	<label>姓名</label>
	<input type="text" name="">
	<label>爱好</label>
	<input type="text" name="">
</div>
<div class="selectc">
	<select multiple="true" id="selected1" style="width: 150px;height: 200px;">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>
		<option value="8">8</option>
		<option value="9">9</option>
	</select>
</div>

<div class="button1">
	<button id="add">选中添加到右边</button>
	<button id="add_all">全部添加右边</button>
	<button id="romve">选中添加到左边</button>
	<button id="romve_all">全部添加左边</button>
</div>
<div class="selected">
	<select multiple="true" id="selected2" style="width: 150px;height: 200px;"></select>
</div>	

<script type="text/javascript">
	$(function(){
		$("#add").on('click',function(){
			$('#selected1 option:selected').appendTo('#selected2');
		});
		$("#add_all").on('click',function(){
			$('#selected1 option').appendTo('#selected2');
		});
		$("#romve").on('click',function(){
			$('#selected2 option:selected').appendTo('#selected1');
		});
		$("#romve_all").on('click',function(){
			$('#selected2 option').appendTo('#selected1');
		});
		$('#selected1 option').on('dblclick',function(){
			$(this).appendTo('#selected2');
		});
		
	});
</script>