总结一下自己第一次写出了的多级联动js

最新推荐文章于 2022-05-15 19:23:00 发布

人间四月天美丽春色

最新推荐文章于 2022-05-15 19:23:00 发布

阅读量309

点赞数

分类专栏： PHP JavaScript jquery

本文链接：https://blog.csdn.net/zdw19861127/article/details/53382895

版权

PHP 同时被 3 个专栏收录

137 篇文章 1 订阅

订阅专栏

JavaScript

23 篇文章 0 订阅

订阅专栏

jquery

6 篇文章 0 订阅

订阅专栏

/*
 *联动多级下拉框，支持多级联动。
 * 例：<select id='se1' class='sep' data-id='1'></select>
 * <select id='se2' class='sep' data-id='2'></select>
 * <select id='se3' class='sep' data-id='3'></select> .....
 *author:Zhaodawei(1017361009@qq.com)
 * */
(function($){
    window.list= function(className,idName,url,key,value,selectedStr){
        var selectedData=selectedStr?selectedStr.split(','):'';
        if(selectedData !=false){
            window.getData($("."+className).eq(0).val(),$("."+className).eq(0).attr('data-id'),url,className,idName,key,value,selectedData,true);
        }
        $("."+className).change(function(){
            var cid=$(this).val();
            var dataId=parseInt($(this).attr('data-id'));
            window.getData(cid,dataId,url,className,idName,key,value,'',false);
        })
    };
    window.list2= function(className,idName,url,key,value,selectedStr){
        var selectedData=selectedStr?selectedStr.split(','):'';
        window.getData($("."+className).eq(0).val(),$("."+className).eq(0).attr('data-id'),url,className,idName,key,value,selectedData,true);
        $("."+className).change(function(){
            var cid=$(this).val();
            var dataId=parseInt($(this).attr('data-id'));
            window.getData(cid,dataId,url,className,idName,key,value,'',true);
        })
    };
    window.getData=function (cid,dataId,url,className,idName,key,value,selectedData,p) {
        cid=parseInt(cid);
        dataId=parseInt(dataId);
        if(selectedData!=false){
            cid=selectedData.shift();
            $("#"+idName+dataId).val(cid);
        }
        if($("."+className).last().attr('data-id')==dataId) return ;
        $.ajax({
            url:url,
            type:"post",
            data:{id:cid},
            dataType:"json",
            success:function(m){
                if(m && m!=false){
                    $('.'+className).each(function(){
                        var pid=$(this).attr('data-id');
                        if(pid>dataId) $(this).html("<option value='0'>请选择</option>").show();
                    });
                    var psd=dataId+1;
                   if(p)$("#"+idName+psd).html('');
                    $.each(m,function(i,v){
                        $("#"+idName+psd).append("<option value="+v[key]+">"+ v[value]+"</option>");
                    });
                   if(p)window.getData($("#"+idName+psd).val(),psd,url,className,idName,key,value,selectedData,p);
                }else{
                    $('.'+className).each(function(){
                        var pid=$(this).attr('data-id');
                        if(pid>dataId) $(this).html("<option value='0'>请选择</option>");
                    });
                }
            }
        });
    }
})(jQuery);

//list1方法只查找下-层的数据只请求一次，list2方法会查找下多层的数据会请求多次