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());
                }
            });
        }