两个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 相关文章推荐
javascript hasFocus使用实例
Jun 29 Javascript
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
JavaScript实现简单图片切换
Apr 29 Javascript
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
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
python网页请求urllib2模块简单封装代码
2014/02/07 Python
Python查找相似单词的方法
2015/03/05 Python
详解python3中tkinter知识点
2018/06/21 Python
python的依赖管理的实现
2019/05/14 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
python能做什么 python的含义
2019/10/12 Python
如何在django中添加日志功能
2020/02/06 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
python3访问字典里的值实例方法
2020/11/18 Python
详解pandas映射与数据转换
2021/01/22 Python
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
传媒专业推荐信范文
2013/11/23 职场文书
医院辞职信范文
2014/01/17 职场文书
成龙洗发水广告词
2014/03/14 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
中秋节感想
2015/08/10 职场文书
教师教育心得体会
2016/01/19 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers