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 相关文章推荐
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
jQuery hover 延时器实现代码
Mar 12 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 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 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
购买大码女装:Lane Bryant
2016/09/07 全球购物
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
三年级语文教学反思
2014/02/01 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
物理学专业自荐信
2014/06/11 职场文书
党代会心得体会
2014/09/04 职场文书
前台文员岗位职责
2015/02/04 职场文书
质检员岗位职责范本
2015/04/07 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
杨善洲电影观后感
2015/06/04 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python