layui 省市区三级联动 ajax调接口

效果图：

 HTML页面代码

<div class="layui-form-item">
    <label class="layui-form-label">收货地址</label>
    <div class="layui-input-inline" style=" 20%;">
        <select name="province" id="province" lay-filter="province" >
            <option value="0">请选择省份</option>
            @foreach($province_list as $val)
                <option value="{{$val['id']}}">{{$val["name"]}}</option>
            @endforeach
        </select>
    </div>
    <div class="layui-form-mid">-</div>
    <div class="layui-input-inline" style=" 20%;">
        <select name="city" id="city" lay-filter="city">
            <option value="0">请选择城市</option>
        </select>
    </div>
    <div class="layui-form-mid">-</div>
    <div class="layui-input-inline" style=" 20%;">
        <select name="district" id="district">
            <option value="0">请选择地区</option>
        </select>
    </div>
</div>

js代码：

<script>
    // +----------------------------------------------------------------------
    // | 选择地址
    // +----------------------------------------------------------------------
    layui.use(['layer', 'jquery', 'form'], function () {
        var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form;

        form.on('select(province)', function(data){
            var cityid = data.value;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                url: "/Order/city",
                data:{cityid:cityid},
                datatype:"JSON",
                success:function(data){
                    $("#city").html(''); 
                    $("#district").html(''); 
                    var list = data.data;
                    var citysHtml = "<option value='0'>请选择城市</option>";
                    $.each(list, function (index,city) {     
                        citysHtml += '<option value="' + city.id + '" >' + city.name + '</option>'; 
                    });
                    $("#city").html(citysHtml);
                    form.render('select');
                }
            });
            
        });
        form.on('select(city)', function(data){
            var cityid = data.value;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                url: "/Order/district",
                data:{cityid:cityid},
                datatype:"JSON",
                success:function(data){  
                    // var json =  JSON.parse(data);
                    var list = data.data;
                    $("#district").empty();
                    $("#district").append("<option value='0'>请选择地区</option>"); 
                    $.each(list, function (index) {     
                        $("#district").append("<option value="+list[index].id+">"+list[index].name+"</option>"); 
                    });
                    form.render('select');
                }
            });
            
        });
    });
</script>