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中的style.display属性操作
Mar 27 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
Three.js基础学习教程
Nov 16 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
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版(4)
2006/10/09 PHP
php动态生成JavaScript代码
2009/03/09 PHP
php 分页原理详解
2009/08/21 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
PHP会话处理的10个函数
2015/08/11 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
js微信支付实现代码
2016/12/22 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python实现决策树分类算法
2017/12/21 Python
Python列表如何更新值
2020/05/27 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
暑假实习求职信范文
2013/09/22 职场文书
生态学毕业生自荐信
2013/10/27 职场文书
环境保护建议书
2014/08/26 职场文书
2014年检验科工作总结
2014/11/22 职场文书
国家助学金感谢信
2015/01/21 职场文书
学校教学工作总结2015
2015/05/19 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis