文档章节

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

w
 weixingo
发布于 2016/05/13 20:19
字数 309
阅读 125
收藏 6

效果图

<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>

 

本文转载自:http://hechuanzhen.iteye.com/blog/1878886

共有 人打赏支持
w
粉丝 5
博文 71
码字总数 7984
作品 0
无锡
私信 提问
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
0
0
jquery radio取值,checkbox取值,select取值,radio选中,checkbo

一、jquery取radio单选按钮的值 $("input[name='items']:checked").val(); 另:判断radio是否选中并取得选中的值 如下所示: function checkradio(){ var item = $(":radio:checked"); var l......

乐派电影
2014/03/31
0
0
jquery 学习

1.常见的jquery 对象操作 jquery取radio单选按钮的值 $("input[name='items']:checked").val(); jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相...

晨曦之光
2012/03/09
63
0
推荐 15 个 jQuery 选择框插件

jQuery Selectbox 插件可以让你创建漂亮和吸引眼球的选择框,用于替代浏览器自带的老旧的 HTML 选择框效果。本文向你推荐 15 个 jQuery 的选择框插件,可轻松集成到你的 Web 应用中。希望你能...

oschina
2015/07/03
46.8K
13
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/82530844 网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系 在项目开发过...

孙华强
09/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vue-cli 3 分环境打包

在vue-cli3的项目中, npm run serve时会把process.env.NODE_ENV设置为‘development’; npm run build 时会把process.env.NODE_ENV设置为‘production’; 此时只要根据process.env.NODE_...

灰白发
13分钟前
1
0
集合初始化,泛型及相关操作

集合初始化通常进行分配容量,设置特定参数等相关工作,推荐在任何情况下,都需要显式地设定集合容量的初始大小。 ArrayList 使用无参构造时,默认大小为 10 ,也就是说在第一次add的时候,分...

Canaan_
23分钟前
1
0
Sping之项目中pofile的应用

工程中,我们必须要面对的一件事就是, 开发环境中使用的数据库连接地址等与生产上的不同, 如果上线, 那么我们是否还要手动修改这些地址么, 这样做有很多弊端, 不方便, 这时我们就可以使用spr...

克虏伯
30分钟前
0
0
Linux中安装MySQL

Linux中安装MySQL 一、准备工作 此处准备的操作系统位CentOS 7。 MySQL安装包: MySQL-server-5.6.29-1.linux_glibc2.5.x86_64.rpm MySQL-client-5.6.29-1.linux_glibc2.5.x86_64.rpm 将准备......

星汉
35分钟前
1
0
深入理解Hadoop之HDFS架构

Hadoop分布式文件系统(HDFS)是一种分布式文件系统。它与现有的分布式文件系统有许多相似之处。但是,与其他分布式文件系统的差异是值得我们注意的: HDFS具有高度容错能力,旨在部署在低成...

架构师springboot
39分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部