基于layui的城市三级联动数据回显

layui的城市三级联动参考以下文章：

写文章-CSDN博客https://mp.csdn.net/mp_blog/creation/editor/122726808数据回显，只需要在页面中将默认值修改即可。修改如下：

注意：后端传过来的数据在js中读取的时候，如果是整数类型直接使用[[${customers}]]就可以打印出来，但是如果是字符串类型，需要使用 '[[${customers}]]' 来表示。否则 会报 山西 is undefined

//关键代码修改如下：此处以返回省，市，区/县名称为例:

<script type="text/javascript" >
    window.customers = '[[${customers}]]';
    var defaults = {
        s1: 'provName',
        s2: 'cityName',
        s3: 'areaName',
        v1: '[[${customers.provName}]]',
        v2: '[[${customers.cityName}]]',
        v3: '[[${customers.areaName}]]'
    };
    var $form;
    var form;
    var $;
    layui.define(['jquery', 'form'], function () {
        $ = layui.jquery;
        form = layui.form;
        $form = $('form');
        treeSelect(defaults);
    });
    function treeSelect(config) {
        config.v1 = config.v1 ? config.v1 :'[[${customers.provName}]]';
        config.v2 = config.v2 ? config.v2 :'[[${customers.cityName}]]';
        config.v3 = config.v3 ? config.v3 : '[[${customers.areaName}]]';

        $.each(threeSelectData, function (k, v) {
            appendOptionTo($form.find('select[name=' + config.s1 + ']'), k, v.val, config.v1);
        });
        form.render();
        cityEvent(config);
        areaEvent(config);
        form.on('select(' + config.s1 + ')', function (data) {
            cityEvent(data);
            form.on('select(' + config.s2 + ')', function (data) {
                areaEvent(data);
            });
        });

        function cityEvent(data) {
            $form.find('select[name=' + config.s2 + ']').html("");
            config.v1 = data.value ? data.value : config.v1;
            $.each(threeSelectData, function (k, v) {
                if (k === config.v1) {
                    if (v.items) {
                        $.each(v.items, function (kt, vt) {
                            appendOptionTo($form.find('select[name=' + config.s2 + ']'), kt, vt.val, config.v2);
                        });
                    }
                }
            });
            form.render();
            config.v2 = $('select[name=' + config.s2 + ']').val();
            areaEvent(config);
        }
        function areaEvent(data) {
            $form.find('select[name=' + config.s3 + ']').html("");
            config.v2 = data.value ? data.value : config.v2;
            $.each(threeSelectData, function (k, v) {
                if (k === config.v1) {
                    if (v.items) {
                        $.each(v.items, function (kt, vt) {
                            if (kt === config.v2) {
                                $.each(vt.items, function (ka, va) {
                                    appendOptionTo($form.find('select[name=' + config.s3 + ']'), ka, va, config.v3);
                                });
                            }
                        });
                    }
                }
            });
            form.render();
            form.on('select(' + config.s3 + ')', function (data) { });
        }
        function appendOptionTo($o, k, v, d) {
            var $opt = $("<option>").text(k).val(k);
            if (k === d) { $opt.attr("selected", "selected") }
            $opt.appendTo($o);
        }
    }

</script>