jQuery实现多选下来框(multiple select)

程序员文章站 2022-06-09 18:30:13

...

jQuery实现多选下来框(multiple select)

博客分类： JS CodeJquery 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>

jQuery实现多选下来框(multiple select)

用javascript实现不按Ctrl实现Multiple Select多选

用jQuery实现可输入多选下拉组合框实例代码

jQuery实现select下拉框获取当前选中文本、值、索引

jquery 下拉框插件,实现智能补全,模糊搜索,多选

jquery实现省市select下拉框的替换(示例代码)

自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

Jquery编程开发中可多选的下拉框如何实现？

Bootstrap select实现下拉框多选效果

用javascript实现不按Ctrl实现Multiple Select多选

jQuery 获取和设置select下拉框的值实现代码