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 应用技巧集合[推荐]
Aug 30 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 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
隐藏你的.php文件的实现方法
2007/03/19 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
深入php内核之php in array
2015/11/10 PHP
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
python 删除非空文件夹的实例
2018/04/26 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
python实现从wind导入数据
2019/12/03 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
pygame实现飞机大战
2020/03/11 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
python归并排序算法过程实例讲解
2020/11/04 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
德国机车企业:FC-Moto
2017/10/27 全球购物
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
心理健康活动总结
2014/04/30 职场文书
党校学习心得体会范文
2014/09/09 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书