关于layui 三级联动 渲染报错解决方法

/**
 * 时间:2016年11月27日
 * 作者:707200833
 * 说明:依赖与jQuery和layui, 是基于layui开发的一个省市区联动的小插件, 使用上要基于layui的表单进行使用
 */

(function($){
    var pca = {};
    
    pca.keys = {};
    pca.ckeys = {};
    
    pca.init = function(province, city, area,objform,initprovince, initcity, initarea){//jQuery选择器, 省-市-区
        if(!province || !$(province).length) return; 
        $(province).html('');
        $(province).append('<option selected>全部</option>');
        for(var i in citys){
            $(province).append('<option>'+citys[i].name+'</option>');
            pca.keys[citys[i].name] = citys[i];
        }
        //layui.form('select').render();
        objform.render('select'); //刷新select选择框渲染
        if(initprovince) $(province).next().find('[lay-value="'+initprovince+'"]').click();
        if(!city || !$(city).length) return;
        pca.formRender(city,objform);
        layui.form.on('select(province)', function(data){
              var cs = pca.keys[data.value];
              $(city).html('');
              $(city).append('<option>全部</option>');
              if(cs){
                cs = cs.city;          
                for(var i in cs){
                    $(city).append('<option>'+cs[i].name+'</option>');
                    pca.ckeys[cs[i].name] = cs[i];
                }
                $(city).find('option:eq(1)').attr('selected', true);
              }
              objform.render('select'); //刷新select选择框渲染
            $(city).next().find('.layui-this').removeClass('layui-this').click();
            pca.formHidden('province', data.value);
            $('.pca-label-province').html(data.value);//此处可以自己修改 显示的位置, 不想显示可以直接去掉
        }); 
        if(initprovince) $(province).next().find('[lay-value="'+initprovince+'"]').click();
        if(initcity) $(city).next().find('[lay-value="'+initcity+'"]').click();
        if(!area || !$(area).length) return;
        pca.formRender(area,objform);
        layui.form.on('select(city)', function(data){
              var cs = pca.ckeys[data.value];
              $(area).html('');
              $(area).append('<option>全部</option>');
              if(cs){
                  cs = cs.area;
                for(var i in cs){
                    $(area).append('<option>'+cs[i]+'</option>');
                }
                $(area).find('option:eq(1)').attr('selected', true);
              }
              objform.render('select'); //刷新select选择框渲染
            $(area).next().find('.layui-this').removeClass('layui-this').click();
            pca.formHidden('city', data.value);
            $('.pca-label-city').html(data.value);    //此处可以自己修改 显示的位置, 不想显示可以直接去掉
        }); 
        layui.form.on('select(area)', function(data){
            pca.formHidden('area', data.value);        
            $('.pca-label-area').html(data.value);    //此处可以自己修改 显示的位置, 不想显示可以直接去掉
        }); 
        if(initprovince) $(province).next().find('[lay-value="'+initprovince+'"]').click();
        if(initcity) $(city).next().find('[lay-value="'+initcity+'"]').click();
        if(initarea) $(area).next().find('[lay-value="'+initarea+'"]').click();
    }
    
    pca.formRender = function(obj,objform){
        $(obj).html('');
        $(obj).append('<option>全部</option>');
        objform.render('select'); //刷新select选择框渲染
    }
    
    pca.formHidden = function(obj, val){
        if(!$('#pca-hide-'+obj).length) 
            $('body').append('<input id="pca-hide-'+obj+'" type="hidden" value="'+val+'" />');
        else
            $('#pca-hide-'+obj).val(val);
    }
    
    window.pca = pca;
    return pca;
})($);

//注意 调用方法,传过去一个form对象(layui版本过低, 坑。。。。)

var city={};

        layui.use('form', function () {
            var form = layui.form;
            pca.init('select[name=P1]', 'select[name=C1]', 'select[name=A1]', form);
        });

 //加入下拉框改变事件,执行搜索

        layui.form.on('select(area)', function (data) {
            pca.formHidden('area', data.value);
            $('.pca-label-area').html(data.value);    //此处可以自己修改 显示的位置, 不想显示可以直接去掉
            $('#btnSearch').click(); //执行搜索事件
        });

 //加入搜索后值不变 赋值方法

<script type="text/javascript">
    var str = $("#txt_json").val();
    var citys = JSON.parse(str);
    layui.use('form', function () {
        var form = layui.form;
        pca.init('select[name=A1]', 'select[name=B1]', 'select[name=C1]', form);
        rend(form);
    });
    function rend(form) { 
        var ABC = $("#txt_type").val();
        var A1 = ABC.split(',')[0];
        var B1 = ABC.split(',')[1];
        var C1 = ABC.split(',')[2];

        var selectA1 = $("select[name=A1]");
        var keys = {};
        var ckeys = {};
        $(selectA1).children("option").each(function () {
            if ($(this).text() === A1) {
                $("select[name=A1]").find('option:eq(' + this.index + ')').attr('selected', true);//设置样式
                //--追加数据

                for (var i in citys) {
                    keys[citys[i].name] = citys[i];
                }
                var cs = keys[A1];
                $("select[name=B1]").html('');
                $("select[name=B1]").append('<option>全部</option>');
                if (cs) {
                    cs = cs.city;
                    for (var i in cs) {
                        $("select[name=B1]").append('<option>' + cs[i].name + '</option>');
                        ckeys[cs[i].name] = cs[i];
                    }
                    //$("select[name=B1]").find('option:eq(0)').attr('selected', true);
                }
            }
        });
        form.render('select'); //刷新select选择框渲染
        var selectB1 = $("select[name=B1]"); 
        $(selectB1).children("option").each(function () {
            if ($(this).text() === B1) {
                $("select[name=B1]").find('option:eq(' + this.index + ')').attr('selected', true);
                var cs = ckeys[B1]; //获得B1的子集
                $("select[name=C1]").html('');
                $("select[name=C1]").append('<option>全部</option>');
                if (cs) {
                    cs = cs.area;
                    for (var i in cs) {
                        $("select[name=C1]").append('<option>' + cs[i] + '</option>');
                    }
                    // $(area).find('option:eq(1)').attr('selected', true); //设置默认选中值
                }
            }
        });
        form.render('select'); //刷新select选择框渲染
        var selectC1 = $("select[name=C1]");
        $(selectC1).children("option").each(function () {
            if ($(this).text() === C1) {
                $("select[name=C1]").find('option:eq(' + this.index + ')').attr('selected', true);
            }
        });
        form.render('select'); //刷新select选择框渲染
    }

</script>

弄了半天 ..擦

 

        //触发下拉框首个单击事件
        var sele = $("#selDepartment").next().find("dd");
        $(sele[0]).trigger("click");

触发dd事件

posted @ 2018-07-09 18:58  enych  阅读(2470)  评论(0编辑  收藏  举报