layui实现四级地址联动

实现几个地址联动的功能看起来很简答密码，实则很多坑，本小白也是经过很多尝试后才找到了解决办法
我们下来看看我的前端页面

<div class="layui-form-item">
        <label class="layui-form-label">地址省编码</label>
        <div class="layui-input-block">
            <select id="provinceName" name="provinceName" lay-verify="required" lay-filter="provinceName"  dict="1"></select>
           <input type="hidden" class="layui-input" id="province" name="province"
                   placeholder="请输入地址省编码">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地址市编码</label>
        <div class="layui-input-block">
            <select id="cityName" name="cityName" lay-verify="required" lay-filter="cityName"  dict="1"></select>
           <input type="hidden" class="layui-input" id="city" name="city"  placeholder="请输入地址市编码">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地址区编码</label>
        <div class="layui-input-block">
            <select id="townName" name="townName" lay-verify="required" lay-filter="townName"  dict="1"></select>
            <input type="hidden" class="layui-input" id="town" name="town"  placeholder="请输入地址区编码">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地址街道编码</label>
        <div class="layui-input-block">
            <select id="streetName" name="streetName" lay-verify="required" lay-filter="streetName"  dict="1"></select>
           <input type="hidden" class="layui-input" id="street" name="street"
                   placeholder="请输入地址街道编码">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地址详情</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" id="addressDetail" name="addressDetail" lay-verify="required"
                   placeholder="请输入地址详情">
        </div>
    </div>

我这里地址是竖向显示的横向也一样，下面我们要通过js来控制他们的联动。
首先要监听省的变化 代码如下所示

  form.on('select(provinceName)',function(data){
    if(data.value.length==0){
        $('#cityName').find('option').remove();
        $('#townName').find('option').remove();
        $('#streetName').find('option').remove();
        return;
    }else{
          $('#cityName').find('option').remove();
          $('#townName').find('option').remove();
          $('#streetName').find('option').remove();
        loadDic.loadCity("cityName","cityName",data.value);
    }
})

我这里是省有变化就清空所有的下级地址。
当然省需要从后台读取：下面是访问接口的代码 ，当然你也可以自己定义方法

   //读取省级地址s
   loadProvince: function(formId,provinceId,keyValue){
        var body = layui.layer.getChildFrame('body');
             var _this = (keyValue == null ? $('#'+formId):body.find("#"+formId));
        if (keyValue == null ){
            keyValue = $('#'+provinceId).val();
        }
        var dict = _this.attr("dict");
        //构建传输url
        HttpUtil.postHeader(HttpUrl.baseUrl+HttpUrl.listAddrass,{dicType:dict},function(data){
            console.log(data);
            if(data.code == 0 ){
                console.log(data);
                _this.append(`<option value = "">--请选择--</option>`);
                for (var i=0; i<data.data.length; i++){
                    if(data.data[i].dicKey == keyValue){
                        _this.append(`<option value = "${data.data[i].dicKey}" selected>${data.data[i].dicValues}</option>`);
                    }else{
                        _this.append(`<option value = "${data.data[i].dicKey}" >${data.data[i].dicValues}</option>`);
                    }
                }
                form.render('select');
            }
        },false,window.sessionStorage.getItem("Authorization"));
    },

比如说，你现在要联动市级id，那么formId就是你市级地址的Id，provicnceKey就是你省级地址的值。
postHeader是我封装好的一个方法，可用于访问后台接口
HttpUrl.baseUrl+HttpUrl.listAddrass这个是你要访问的接口地址
联动市级级地址也是一样的，我这里就不一一赘述了，直接上代码

//读取市级地址
        loadCity: function(formId,cityId,provinceKey,keyValue){
            var body = layui.layer.getChildFrame('body');

            var _this = (keyValue == null ? $('#'+formId):body.find("#"+formId));

            if (keyValue == null ){
                keyValue = $('#'+cityId).val();
            }
                  //构建传输url
            HttpUtil.postHeader(HttpUrl.baseUrl+HttpUrl.listAddrass,{dicKey:provinceKey,flag:"2"},function(data){
                console.log(data);
                if(data.code == 0 ){
                    console.log(data);
                    _this.append(`<option value = "">--请选择--</option>`);

                    for (var i=0; i<data.data.length; i++){
                        if(data.data[i].dicKey == keyValue){
                            _this.append(`<option value = "${data.data[i].dicKey}" selected>${data.data[i].dicValues}</option>`);
                        }else{
                            _this.append(`<option value = "${data.data[i].dicKey}" >${data.data[i].dicValues}</option>`);
                        }
                    }
                    form.render('select');
                }
            },false,window.sessionStorage.getItem("Authorization"));
        },

读取区级地址

//读取区级地址
        loadTown: function(formId,townId,cityKey,keyValue){
            var body = layui.layer.getChildFrame('body');
            var _this = (keyValue == null ? $('#'+formId):body.find("#"+formId));
            if (keyValue == null ){
                keyValue = $('#'+townId).val();
            }
            HttpUtil.postHeader(HttpUrl.baseUrl+HttpUrl.listAddrass,{dicKey:cityKey,flag:"3"},function(data){
                if(data.code == 0 ){
                    console.log(data);
                    _this.append(`<option value = "">--请选择--</option>`);
                    for (var i=0; i<data.data.length; i++){
                        if(data.data[i].dicKey == keyValue){
                            _this.append(`<option value = "${data.data[i].dicKey}" selected>${data.data[i].dicValues}</option>`);
                        }else{
                            _this.append(`<option value = "${data.data[i].dicKey}" >${data.data[i].dicValues}</option>`);
                        }
                    }
                    form.render('select');
                }
            },false,window.sessionStorage.getItem("Authorization"));
        },

读取街道地址

//读取街道信息
        loadStreet: function(formId,streetId,townKey,keyValue){
            var body = layui.layer.getChildFrame('body');
            var _this = (keyValue == null ? $('#'+formId):body.find("#"+formId));
            if (keyValue == null ){
                keyValue = $('#'+streetId).val();
            }
            //构建传输url
            HttpUtil.postHeader(HttpUrl.baseUrl+HttpUrl.listAddrass,{dicKey:townKey,flag:"4"},function(data){
                console.log(data);
                if(data.code == 0 ){
                    console.log(data);
                    _this.append(`<option value = "">--请选择--</option>`);

                    for (var i=0; i<data.data.length; i++){
                        if(data.data[i].dicKey == keyValue){
                            _this.append(`<option value = "${data.data[i].dicKey}" selected>${data.data[i].dicValues}</option>`);
                        }else{
                            _this.append(`<option value = "${data.data[i].dicKey}" >${data.data[i].dicValues}</option>`);
                        }
                    }
                    form.render('select');
                }
            },false,window.sessionStorage.getItem("Authorization"));
        },

其实都是大同小异，你也可以选择封装好一个方法，把自己想要的地址对应的参数穿进去即可，我这里没有封装，代码的重复性比较高，要是想封装的话，欢迎一起探讨。
`