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 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
JS将unicode码转中文方法
May 08 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
PHP中的float类型使用说明
2010/07/27 PHP
js 处理数组重复元素示例代码
2013/12/27 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
详解JavaScript树结构
2017/01/09 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
python操作xml文件详细介绍
2014/06/09 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
下载官网python并安装的步骤详解
2019/10/12 Python
Tensorflow累加的实现案例
2020/02/05 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
工作个人的自我评价
2014/01/14 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
优秀党支部申报材料
2014/12/24 职场文书
2015入党自传书范文
2015/06/26 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL