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鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
js严格模式总结(分享)
Aug 22 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
vue使用echarts图表的详细方法
Oct 22 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输出含有“#”字符串的方法
2017/01/18 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
python创建文本文件的简单方法
2020/08/30 Python
python实现银行账户系统
2021/02/22 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
养殖人员的创业计划书范文
2013/12/26 职场文书
个人求职信范文分享
2014/01/06 职场文书
法人委托书范本格式
2014/09/15 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
重阳节活动主持词
2015/07/04 职场文书
社区宣传标语口号
2015/12/26 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android