layer 三级联动的实现

记录下，以便于下次使用：

HTML：

<div class="layui-form">
                                    <div class="layui-inline">
                                        <select name="d_province" class="state" lay-filter="state">
                                            <option value="0">请选择</option>
                                        </select>
                                    </div>
                                    <div class="layui-inline">
                                        <select name="d_city" class="state" lay-filter="state">
                                            <option value="0">请选择</option>
                                        </select>
                                    </div>
                                    <div class="layui-inline">
                                        <select name="d_area" class="state" lay-filter="state">
                                            <option value="0">请选择</option>

                                        </select>
                                    </div>

                                </div>

JS:

 var $ = layui.jquery;
        var form = layui.form();
        var laydate = layui.laydate;

        //三级联动
        //如果有需要到镇的改改就可以实现
        var url = '/Shipper/City/GetCityList'; //数据请求地址
        var province = "广东省"; //编辑需要的省
        var city = "广州市"; //编辑需要的市
        var district = "天河区"; //编辑需要的县/区
        getJSON(url, $("select[name='d_province']").closest("div"));
        form.on('select(state)', function (data) {

            debugger;
            $that = $(data.elem);
            urls = url + "?pid=" + data.value;
            getJSON(urls, $that.closest("div").next());
        });
        function getJSON(urls, even) {
            $.getJSON(urls, function (json) {
                var pid = 0;
                var name = even.find("select").attr("name");
                var select = "<select name="" + name + "" lay-filter="state">";
                select += "<option value="0">请选择 </option>";
                $(json).each(function () {
                    select += "<option value="" + this.AreaId + """;
                    if (province == this.AreaName || city == this.AreaName || district == this.AreaName) {
                        select += " selected="selected" ";
                        pid = this.AreaId;
                    }
                    select += ">" + this.AreaName + "</option>";
                });
                select += "</select>";
                even.html(select);
                var nextName = even.next().find("select").attr("name");
                even.next().html("<select name="" + nextName + "" lay-filter="state"><option value="0">请选择 </option></select>");
                form.render('select');
                if (pid != 0) {
                    getJSON(url + "?pid=" + pid, even.next());
                }
            });
        }