【jsとjquery】ドロップダウンボックス左右選択機能

2238 ワード

1.効果図:
2.htmlコード:
<body>
	<div class="centent">
		<select multiple="multiple" id="select1" style="width:100px;height:160px;">
			<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>
		</select>
		<div>
			<span id="add" >       >></span>
			<span id="add_all" >       >></span>
		</div>
	</div>

	<div class="centent">
		<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
			<option value="8">  8</option>
		</select>
		<div>
			<span id="remove"><<       </span>
			<span id="remove_all"><<       </span>
		</div>
	</div>


</body>

3.jqueryコード:
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	//    
	$('#add').click(function() {
	//       ,        
		$('#select1 option:selected').appendTo('#select2');
	});
	//    
	$('#remove').click(function() {
		$('#select2 option:selected').appendTo('#select1');
	});
	//      
	$('#add_all').click(function() {
		//       ,        
		$('#select1 option').appendTo('#select2');
	});
	//      
	$('#remove_all').click(function() {
		$('#select2 option').appendTo('#select1');
	});
	//    
	$('#select1').dblclick(function(){ //      
		//       ,        
		$("option:selected",this).appendTo('#select2'); //     
	});
	//    
	$('#select2').dblclick(function(){
	   $("option:selected",this).appendTo('#select1');
	});
});
</script>