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 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
Three.js学习之几何形状
Aug 01 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 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 sprintf()函数用例解析
2011/05/18 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
Ext 今日学习总结
2010/09/19 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
详解python分布式进程
2018/10/08 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
美国在线家具网站:GDFStudio
2021/03/13 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
个人找工作自荐信格式
2013/09/21 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
认错检讨书
2014/10/02 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
老人与海读书笔记
2015/06/26 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
python中数组和列表的简单实例
2022/03/25 Python