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 prototype原型操作笔记
Dec 07 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
js函数调用常用方法详解
Dec 03 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
微信小程序使用request网络请求操作实例
Dec 15 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 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
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
php实现微信扫码支付
2017/03/26 PHP
php 数据结构之链表队列
2017/10/17 PHP
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
javascript实现简易计算器
2017/02/01 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
python中异常报错处理方法汇总
2016/11/20 Python
Python3.6正式版新特性预览
2016/12/15 Python
在centos7中分布式部署pyspider
2017/05/03 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
python set内置函数的具体使用
2019/07/02 Python
python实现处理mysql结果输出方式
2020/04/09 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
网站设计师的岗位职责
2013/11/21 职场文书
校庆活动策划方案
2014/06/05 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
中秋节随笔
2015/08/15 职场文书
自考生自我评价
2019/06/21 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python