关于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);
        });

猜你喜欢

转载自www.cnblogs.com/enych/p/9285451.html
今日推荐