layui 三级联动 重新渲染

html部分：

<div class="layui-form-item">
    <label class="layui-form-label">选择省市区</label>
    <div class="layui-input-inline">
        <select name="province" lay-search="" id="province" lay-filter="province">
            <option value="{$list.province_id}">{$list.province ?$list.province:'请选择省'}</option>
            
        </select>
    </div>
    <div class="layui-input-inline">
        <select name="city" lay-search="" id="city" lay-filter="city">
            <option value="{$list.city_id}">{$list.city ?$list.city:'请选择市'}</option>
            {volist name="citys" id="vo"}
            <option value="{$vo.id}">{$vo.name}</option>
            {/volist}
        </select>
    </div>
    <div class="layui-input-inline">
        <select name="area" lay-search="" id="area" lay-filter="area">
            <option value="{$list.area_id}">{$list.area ?$list.area:'请选择区'}</option>
            {volist name="areas" id="vo"}
            <option value="{$vo.id}">{$vo.name}</option>
            {/volist}
        </select>
    </div>
</div>

js部分：

    <script>
        var layer = layui.layer;

        var type;
        layui.use(['element', 'jquery', 'layer', 'form', 'laydate'], function () {
            var form = layui.form
                , element = layui.element
                , laydate = layui.laydate
			
			//加载省份
            $(function () {
                $.ajax({
                    url: "{:url('school/GetLevelThree')}",
                    dataType: 'json',
                    data: { "action_post": "GetProvince" },
                    type: 'POST',
                    success: function (res) {
                        console.log(res.data);
                        let selectData = res.data;
                        let newsArr = []
                        selectData.forEach(item => {
                                let obj = {
                                id:item.id,
                                name:item.name
                            }
                            newsArr.push(obj) 
                        });

                        newsArr.forEach(item => {
                            $("#province").append(`<option value="${item.id}">${item.name}</option>`);	//循环添加option选项
                        })
                        
                        layui.form.render();	//重新渲染页面
                    }
                })

            })
            form.on('select(province)', function (data) {
                $.ajax({
                    type: "POST",
                    url: "{:url('school/GetLevelThree')}",
                    data: { "action_post": "GetCity", "provinceid": data.value },
                    async: false,
                    success: function (res) {
                        console.log(res.data);
                        let selectData = res.data;
                        let newsArr = []
                        $("#city").empty();
                        $("#city").append(`<option value="">请选择市</option>`);
                        $("#area").empty();
                        $("#area").append(`<option value="">请选择区</option>`);
                        selectData.forEach(item => {
                                let obj = {
                                id:item.id,
                                name:item.name
                            }
                            newsArr.push(obj) 
                        });
                        newsArr.forEach(item => {
                            $("#city").append(`<option value="${item.id}">${item.name}</option>`);
                        })
                        layui.form.render();
                    }
                })
            });
            form.on('select(city)', function (data) {
                $.ajax({
                    type: "POST",
                    url: "{:url('school/GetLevelThree')}",
                    data: { "action_post": "GetArea", "cityid": data.value },
                    async: false,
                    success: function (res) {
                        console.log(res.data);
                        let selectData = res.data;
                        let newsArr = []
                        $("#area").empty();
                        $("#area").append(`<option value="">请选择区</option>`);
                        selectData.forEach(item => {
                                let obj = {
                                id:item.id,
                                name:item.name
                            }
                            newsArr.push(obj) 
                        });

                        newsArr.forEach(item => {
                            $("#area").append(`<option value="${item.id}">${item.name}</option>`);
                        })
                        layui.form.render();
                    }
                })
                // console.log(data.elem); //得到select原始DOM对象
                // console.log(data.value); //得到被选中的值
                // console.log(data.othis); //得到美化后的DOM对象
            });

        })
    </script>