jquery 操作两个select实现值之间的互相传递


Posted in Javascript onMarch 07, 2014
function moveToRight(select1,select2)//把选中的移动到右边 sleect1和sleect2分别是下拉列表框的ID
{
 $('#'+select1+' option:selected').each(function(){
  $("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>").appendTo("#"+select2+"");
  $(this).remove();
  $('#'+select2).bind('dblclick',function(){
  moveToLeft(select1,select2);
  });  
 });
}
function moveAllToRight(select1,select2)//把所有的移动到右边
{
 $('#'+select1+' option').each(function(){
  $("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>").appendTo("#"+select2+"");
  $(this).remove();
 });
}
function moveToLeft(select1,select2)//把选中的移动到左边
{
 $('#'+select2+' option:selected').each(function(){
  $("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>").appendTo("#"+select1+"");
  $(this).remove();
 });
}
function moveAllToLeft(select1,select2)//把所有的移动到左边
{
 $('#'+select2+' option').each(function(){
  $("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>").appendTo("#"+select1+"");
  $(this).remove();
 });
}

如果要双击select中的某一个option就把当前值传到另一个select需要bind一个select 事件 如下即可
$('#sel2').bind('dblclick',function(){//给下拉框绑定双击事件
     moveToRight('sel2','sel3');
    });
    $('#sel3').bind('dblclick',function(){
     moveToLeft('sel2','sel3');
    }); 
Javascript 相关文章推荐
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 #Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 #Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 #Javascript
jquery单行文字向上滚动效果示例
Mar 06 #Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 #Javascript
在Firefox下js select标签点击无法弹出
Mar 06 #Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 #Javascript
You might like
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
PHP反射学习入门示例
2019/06/14 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
python3图片文件批量重命名处理
2019/10/31 Python
Python列表解析操作实例总结
2020/02/26 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
大学生职业生涯规划书模版
2013/12/30 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
雷人标语集锦
2014/06/19 职场文书
应届生自荐信
2014/06/30 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
专家推荐信怎么写
2015/03/25 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python