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 相关文章推荐
一些常用的Javascript函数
Dec 22 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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/11/27 PHP
php解析url的三个示例
2014/01/20 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
python如何快速生成时间戳
2020/07/21 Python
Python编写万花尺图案实例
2021/01/03 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
大型营销活动计划书
2014/04/28 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
个人职业及收入证明
2014/10/13 职场文书
护士自荐信怎么写
2015/03/06 职场文书
小学班主任自我评价
2015/03/11 职场文书
小学德育工作总结2015
2015/05/12 职场文书
第一节英语课开场白
2015/06/01 职场文书
返乡农民工证明
2015/06/24 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP