zoukankan      html  css  js  c++  java
  • 关于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事件

  • 相关阅读:
    Github for Windows使用介绍
    Activity生命周期
    Java日期LocalDate使用
    一、安装Windows 2012域控(For SQLServer 2014 AlwaysOn)
    .NET(C#):分析IL中的if-else,while和for语句并用Emit实现
    sqlserver中几种典型的等待
    ServiceStack.Redis常用操作
    ServiceStack.Redis 之 IRedisTypedClient<第四篇>
    ServiceStack.Redis之IRedisClient<第三篇>
    Redis常用命令速查 <第二篇>
  • 原文地址:https://www.cnblogs.com/enych/p/9285451.html
Copyright © 2011-2022 走看看