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 相关文章推荐
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
Vue+Django项目部署详解
May 30 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
php中用数组的方法设置cookies
2011/04/21 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
js 深拷贝函数
2008/12/04 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
python 修改本地网络配置的方法
2019/08/14 Python
Python如何重新加载模块
2020/07/29 Python
捐款倡议书范文
2014/02/02 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
新教师个人工作总结
2015/02/06 职场文书
继续教育个人总结
2015/03/03 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
红色革命电影观后感
2015/06/18 职场文书
详解Python描述符的工作原理
2021/06/11 Python
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python