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 相关文章推荐
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
浅谈一个webpack构建速度优化误区
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
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
javascript时区函数介绍
2012/09/14 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
python创建线程示例
2014/05/06 Python
python生成ppt的方法
2018/06/07 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
python opencv摄像头的简单应用
2019/06/06 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
python opencv实现证件照换底功能
2019/08/19 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
Python接口自动化测试的实现
2020/08/28 Python
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
财务管理个人自荐书范文
2013/11/24 职场文书
护士实习求职信
2014/06/22 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
政府会议通知范文
2015/04/15 职场文书
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
python中取整数的几种方法
2021/11/07 Python