两个select之间option的互相添加操作(jquery实现)


Posted in Javascript onNovember 12, 2009

自己写了一个很简单的jquery插件,在页面中调用其中的函数就可实现.
插件源代码(listtolist.js):

/** 
fromid:源list的id. 
toid:目标list的id. 
moveOrAppend参数("move"或者是"append"): 
move -- 源list中选中的option会删除.源list中选中的option移动到目标list中,若目标list中已存在则该option不添加. 
append -- 源list中选中的option不会删除.源list中选中的option添加到目标list的后面,若目标list中已存在则该option不添加. isAll参数(true或者false):是否全部移动或添加 
*/ 
jQuery.listTolist = function(fromid,toid,moveOrAppend,isAll) { 
    if(moveOrAppend.toLowerCase() == "move") {    //移动 
        if(isAll == true) {    //全部移动 
            $("#"+fromid+" option").each(function() { 
                //将源list中的option添加到目标list,当目标list中已有该option时不做任何操作. 
                $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))")); 
            }); 
            $("#"+fromid).empty();    //清空源list 
        } 
        else if(isAll == false) { 
            $("#"+fromid+" option:selected").each(function() { 
                //将源list中的option添加到目标list,当目标list中已有该option时不做任何操作. 
                $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))")); 
                //目标list中已经存在的option并没有移动,仍旧在源list中,将其清空. 
                if($("#"+fromid+" option[value="+$(this).val()+"]").length > 0) { 
                    $("#"+fromid).get(0) 
                    .removeChild($("#"+fromid+" option[value="+$(this).val()+"]").get(0)); 
                } 
            }); 
        } 
    } 
    else if(moveOrAppend.toLowerCase() == "append") { 
        if(isAll == true) { 
            $("#"+fromid+" option").each(function() { 
                $("<option></option>") 
                .val($(this).val()) 
                .text($(this).text()) 
                .appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))")); 
            }); 
        } 
        else if(isAll == false) { 
            $("#"+fromid+" option:selected").each(function() { 
                $("<option></option>") 
                .val($(this).val()) 
                .text($(this).text()) 
                .appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))")); 
            }); 
        } 
    } 
}; 
/** 
功能大体同上("move"). 
不同之处在于当源list中的选中option在目标list中存在时,源list中的option不会删除. 
isAll参数(true或者false):是否全部移动或添加 
*/ 
jQuery.list2list = function(fromid,toid,isAll) { 
    if(isAll == true) { 
        $("#"+fromid+" option").each(function() { 
            $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))")); 
        }); 
    } 
    else if(isAll == false) { 
        $("#"+fromid+" option:selected").each(function() { 
            $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))")); 
        }); 
    } 
};

打包下载
Javascript 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
jquery中this的使用说明
Sep 06 Javascript
悬浮数字的实现案例
Feb 19 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
Vue.js学习示例分享
Feb 05 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
XHTML下,JS浮动代码失效的问题
Nov 12 #Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 #Javascript
Javascript 定时器调用传递参数的方法
Nov 12 #Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 #Javascript
JS解析XML的实现代码
Nov 12 #Javascript
跨域表单提交状态的变相判断代码
Nov 12 #Javascript
JS 中document.URL 和 windows.location.href 的区别
Nov 11 #Javascript
You might like
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
python写入中英文字符串到文件的方法
2015/05/06 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
python常见的格式化输出小结
2016/12/15 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
区分python中的进程与线程
2020/08/13 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
百度软件工程师职位
2013/02/14 面试题
信用社员工先进事迹材料
2014/02/04 职场文书
向领导表决心的话
2014/03/11 职场文书
学校安全管理责任书
2014/07/23 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
公积金接收函格式
2015/01/30 职场文书
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python