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 相关文章推荐
JSON 教程 json入门学习笔记
Sep 22 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 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框架codeigniter中如何使用框架的session
2013/06/24 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
layui递归实现动态左侧菜单
2019/07/26 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
python3 pygame实现接小球游戏
2019/05/14 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
python 元组的使用方法
2020/06/09 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
21岁生日感言
2014/02/27 职场文书
财务部总监岗位职责
2014/03/12 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
给领导的感谢信范文
2015/01/23 职场文书
怒海潜将观后感
2015/06/11 职场文书
解析Redis Cluster原理
2021/06/21 Redis
python_tkinter事件类型详情
2022/03/20 Python
Vue操作Storage本地化存储
2022/04/29 Vue.js