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 相关文章推荐
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
微信小程序实现锚点功能
Nov 20 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, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
js location.replace与location.reload的区别
2010/09/08 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
总结js函数相关知识点
2018/02/27 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
Python实现备份文件实例
2014/09/16 Python
详解Python爬虫的基本写法
2016/01/08 Python
python变量不能以数字打头详解
2016/07/06 Python
Python制作刷网页流量工具
2017/04/23 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
Python魔法方法详解
2019/02/13 Python
详解python运行三种方式
2019/05/13 Python
python命令行参数用法实例分析
2019/06/25 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
个人实用简单的自我评价
2013/10/19 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
行政处罚告知书
2015/07/01 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书