文档章节

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

w
 weixingo
发布于 2016/05/13 20:19
字数 309
阅读 122
收藏 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
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系

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

孙华强
09/08
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、双击第一个列表中任意一个列表项,实现向下添加 2、双击第二个列表中任意一个列表项,实现删除,山东海运青岛港推动经济新发展 2、点击按钮,实现对...

墙头草
2011/08/31
0
0
jQuery select操作控制方法小结

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

JK_OPERA
2015/07/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

RedHat已更改其开源许可规则

对于编程圈外的人来说,软件许可证似乎并不重要,但是,在开源领域,开源许可是非常重要的。 因此,领先的Linux公司Red Hat宣布了一件大事,所有新的由Red Hat发起的使用GNU通用公共许可证(...

linux-tao
12分钟前
3
0
游戏化策划的反馈机制

简评:如何低成本地设计游戏化活动运营方案 当项目活动组采用游戏化机制来设计活动时,往往会犯一个错误 —— 以为物质奖励(金钱或实物)就是终极奖励。然后一次又一次的证据显示,有形奖励...

极光推送
14分钟前
1
0
PHP "延迟静态绑定" 功能,static

从这个名字的定义提取出两个关键点,第一点静态,也就是说这个功能只适用于静态属性或静态方法。 第二点延迟绑定,这个根据下面代码就可以很好的理解 class A{ static $name = "Tom";...

nsns
18分钟前
1
0
《看图轻松理解数据结构与算法系列》导引贴

最近学习数据结构,遇到一个很喜欢的博主,他的文章图文并茂,理解起来很容易。特此开贴记录,方便反复阅读。 博主主页 https://juejin.im/user/57c3970f79bc440063e58518/posts?sort=popul...

科陆李明
55分钟前
1
0
20.27 分发系统介绍~ 20.30 expect脚本传递参数

分发系统介绍分发系统-expect讲解(也就是一个分发的脚本)场景:业务越来越大,网站app,后端,编程语言是php,所以就需要配置lamp或者lnmp,最好还需要吧代码上传到服务器上;但是因...

洗香香
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部