jQuery實現多選下來框(multiple select)

時間 2019-11-10

標籤 jquery 實現下來 multiple select 欄目 JQuery 简体版

原文原文鏈接

<script type="text/javascript">
	$(document).ready(function(){
		$('#add').click(function(){
			var $options = $('#select1 option:selected');//獲取當前選中的項
			var $remove = $options.remove();//刪除下拉列表中選中的項
			$remove.appendTo('#select2');//追加給對方
		});
		
		$('#remove').click(function(){
			var $removeOptions = $('#select2 option:selected');
			$removeOptions.appendTo('#select1');//刪除和追加能夠用appendTo()直接完成
		});
		
		$('#addAll').click(function(){
			var $options = $('#select1 option');
			$options.appendTo('#select2');
		});
		
		$('#removeAll').click(function(){
			var $options = $('#select2 option');
			$options.appendTo('#select1');
		});
		
		//雙擊事件
		$('#select1').dblclick(function(){
			//var $options = $('#select1 option:selected');
			var $options = $('option:selected', this);//注意此處「option」與「:」之間的空格，有空格是不能夠的
			$options.appendTo('#select2');
		});
		
		$('#select2').dblclick(function(){
			$('#select2 option:selected').appendTo('#select1');
		});
		
	});
</script>

<body>
    <div class="centent">
    	<select multiple id="select1" style="width:100px;height:250px;">
    		<option value="選項一">選項一</option>
    		<option value="選項二">選項二</option>
    		<option value="選項三">選項三</option>
    		<option value="選項四">選項四</option>
    		<option value="選項五">選項五</option>
    		<option value="選項六">選項六</option>
    		<option value="選項七">選項七</option>
    		<option value="選項八">選項八</option>
    		<option value="選項九">選項九</option>
    	</select>
    	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    	<select multiple id="select2" style="width:100px;height:250px;">
    		
    	</select>
    </div>
    <div>
    	<span id="add">選中添加到右邊&gt;&gt;</span>
    	<span id="remove">&lt;&lt;選中添加到左邊</span><br>
    	<span id="addAll">所有添加到右邊&gt;&gt;</span>
    	<span id="removeAll">&lt;&lt;所有添加到左邊</span>
    </div>
  </body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。