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函数作用域链分析
Feb 13 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
浅谈React Event实现原理
Sep 20 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
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缓存技术的使用说明
2011/08/06 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
joomla组件开发入门教程
2016/05/04 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
Python实现的几个常用排序算法实例
2014/06/16 Python
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python中的zipfile模块使用详解
2015/06/25 Python
《Python学习手册》学习总结
2018/01/17 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python生成特定分布数的实例
2019/12/05 Python
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
三年级学生评语
2014/04/23 职场文书
园艺师求职信
2014/04/27 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android