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 相关文章推荐
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
非常漂亮的js烟花效果
Mar 10 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
js中延迟加载和预加载的具体使用
Jan 14 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取整数函数常用的四种方法小结
2012/07/05 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
PHP会话处理的10个函数
2015/08/11 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
浅谈关于iview表单验证的问题
2018/09/29 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
python处理二进制数据的方法
2015/06/03 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
Python中装饰器学习总结
2018/02/10 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
NULL是什么,它是怎么定义的
2015/05/09 面试题
《燕子专列》教学反思
2014/02/21 职场文书
和睦家庭事迹
2014/05/14 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
毕业论文致谢词
2015/05/14 职场文书
会计实训总结范文
2015/08/03 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
Python实现照片卡通化
2021/12/06 Python