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 相关文章推荐
js正则表达exec与match的区别说明
Jan 29 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
JS实现无限轮播无倒退效果
Sep 21 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
Apache设置虚拟WEB
2006/10/09 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
JS中的三个循环小结
2017/06/20 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
Python正确重载运算符的方法示例详解
2017/08/27 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
浅析python中while循环和for循环
2019/11/19 Python
python装饰器使用实例详解
2019/12/14 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
strstr()的简单实现
2013/09/26 面试题
党支部书记岗位责任制
2014/02/11 职场文书
知识竞赛主持词
2014/03/26 职场文书
三方协议书范本
2014/04/22 职场文书
村党建工作汇报材料
2014/11/02 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
调解协议书范本
2016/03/21 职场文书