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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
jQuery聚合函数实例
May 21 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 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
极典R601SW收音机
2021/03/02 无线电
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
Python实现抢购IPhone手机
2018/02/07 Python
python-numpy-指数分布实例详解
2019/12/07 Python
如何清空python的变量
2020/07/05 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
上海期货面试题
2014/01/31 面试题
销售提升方案
2014/06/07 职场文书
实习协议书范本
2014/09/25 职场文书
工作表扬信范文
2015/01/17 职场文书
小学元宵节活动总结
2015/02/06 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers