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 相关文章推荐
javaScript call 函数的用法说明
Apr 09 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
JavaScript实现连连看连线算法
Jan 05 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
php获取字段名示例分享
2014/03/03 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
vue实现分页组件
2020/06/16 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
python抽取指定url页面的title方法
2018/05/11 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
python中的数据结构比较
2019/05/13 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
Python如何定义有默认参数的函数
2020/08/10 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
给同学的道歉信
2014/01/16 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
小学运动会入场词
2015/07/18 职场文书
2015大一新生军训感言
2015/08/01 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL