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 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
一个简单的javascript类定义例子
Sep 12 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
怎样在UNIX系统下安装php3
2006/10/09 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
React diff算法的实现示例
2018/04/20 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
Python中安装easy_install的方法
2018/11/18 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
Django保护敏感信息的方法示例
2019/05/09 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
python函数定义和调用过程详解
2020/02/09 Python
python实现低通滤波器代码
2020/02/26 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
Python如何输出整数
2020/06/07 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
工程师自我评价怎么写
2013/09/19 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
入党积极分子个人总结
2015/03/02 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL
什么是css原子化,有什么用?
2022/04/24 HTML / CSS