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 网页水印(非图片水印)实现代码
Mar 01 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
javascript中Function类型详解
Apr 28 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
浅谈JavaScript作用域
Dec 06 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
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
js选项卡的实现方法
2015/02/09 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
理解javascript中的闭包
2017/01/11 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
vue环境搭建简单教程
2017/11/07 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
python实现查找所有程序的安装信息
2020/02/18 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
linux面试题参考答案(5)
2016/11/05 面试题
技术副厂长岗位职责
2013/12/26 职场文书
效能监察建议书
2014/05/19 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
优秀英文求职信范文
2015/03/19 职场文书
个人维稳承诺书
2015/05/04 职场文书
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
python处理json数据文件
2022/04/11 Python