Layui下拉3級聯動

這裡我就不給大家詳細說明瞭直接附圖：

js代碼：

layui.use(['layer', 'form','xform','layer'], function () {
    var element = layui.element;
    var form = layui.form;
    var layer  = layui.layer;

    // 城市列表
    $.ajax({
        url:"/city/findById",
        type:"GET",
        async: false,
        cache: false,
        contentType: 'application/json',
        dataType: "json",
        success: function (json) {
            console.log(json);
            var CityListHTML='';
            for (var i=0; i<json.data.length; i++){
                CityListHTML+= '<option value="'+json.data[i].id+'">'+json.data[i].name+'</option>'
            }
            $('#CityList').append(CityListHTML);
            form.render();

            // 區域列表
            form.on('select(CityList)', function(data){
                var CityListid = data.value;
                console.log(CityListid);
                if (CityListid != "Nonull"){
                    document.getElementById('regionList').innerHTML='';
                    document.getElementById('PoliceList').innerHTML='';
                    document.getElementById('Community').innerHTML='';
                    $.ajax({
                        url:"/region/findById/"+CityListid,
                        type:"GET",
                        async: false,
                        cache: false,
                        contentType: 'application/json',
                        dataType: "json",
                        success: function (json) {
                            console.log(json);
                            document.getElementById('regionList').innerHTML='';
                            var regionListHTML='';
                            for (var i=0; i<json.data.length; i++){
                                regionListHTML+='<option value="'+json.data[i].id+'">'+json.data[i].name+'</option>'
                            }
                            $('#regionList').append(regionListHTML);
                            form.render();

                            // 派出所列表
                            form.on('select(regionList)', function(data){
                                var regionListid = data.value;
                                document.getElementById('PoliceList').innerHTML='';
                                document.getElementById('Community').innerHTML='';
                                $.ajax({
                                    url:"/localPoliceStation/findById/"+regionListid,
                                    type:"GET",
                                    async: false,
                                    cache: true,
                                    contentType: 'application/json',
                                    dataType: "json",
                                    success:function (json) {
                                        console.log(json);
                                        document.getElementById('PoliceList').innerHTML='';
                                        var PoliceListHTML='';
                                        for (var i=0; i<json.data.length; i++){
                                            PoliceListHTML+='<option value="'+json.data[i].id+'">'+json.data[i].name+'</option>'
                                        }
                                        $('#PoliceList').append(PoliceListHTML);
                                        form.render();

                                        // 社區列表
                                        form.on('select(PoliceList)', function(data){
                                            var PoliceListid = data.value;
                                            $.ajax({
                                                url:"/community/findById/"+PoliceListid,
                                                type:"GET",
                                                async: false,
                                                cache: false,
                                                contentType: 'application/json',
                                                dataType: "json",
                                                success:function (json) {
                                                    console.log(json);
                                                    document.getElementById('Community').innerHTML='';
                                                    var CommunityHTML='';
                                                    for (var i=0; i<json.data.length; i++){
                                                        CommunityHTML+='<option value="'+json.data[i].id+'">'+json.data[i].name+'</option>'
                                                    }
                                                    $('#Community').append(CommunityHTML);
                                                    form.render();
                                                }
                                            })
                                        })
                                    }
                                })
                            })
                        }
                    })

                }
                else {
                    document.getElementById('regionList').innerHTML='';
                    document.getElementById('PoliceList').innerHTML='';
                    document.getElementById('Community').innerHTML='';
                    form.render();
                }
            })
        }
    });
    form.render();
});