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检测输入内容全为空格的方法
May 03 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
国内常用的js类库大全(CDN公共库)
Jun 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
php中使用临时表查询数据的一个例子
2013/02/03 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
28个JS验证函数收集
2010/03/02 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
js简单时间比较的方法
2016/08/02 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
初学Python函数的笔记整理
2015/04/07 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
工程管理造价应届生求职信
2013/11/13 职场文书
电子信息工程自荐信
2014/05/26 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书