欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

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

时间:2021-08-03 08:58:30|栏目:jquery|点击:
自己写了一个很简单的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()+"]))"));
        });
    }
};

打包下载

上一篇:jQuery源码解读之hasClass()方法分析

栏    目:jquery

下一篇:jQuery实现HTML表格单元格的合并功能

本文标题:两个select之间option的互相添加操作(jquery实现)

本文地址:http://www.codeinn.net/misctech/163829.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有