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,超强推荐base.js
Dec 23 Javascript
自己开发Dojo的建议框架
Sep 24 Javascript
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 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
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
Python笔记之观察者模式
2019/11/20 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
Python是如何进行类型转换的
2013/06/09 面试题
2014年冬季防火方案
2014/05/21 职场文书
工地质量标语
2014/06/12 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
运动会宣传语
2015/07/13 职场文书
体育教师教学随笔
2015/08/15 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
入团申请书格式
2019/06/20 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers