关于layui+php，三级联动-编辑回显的问题。

注

忍不住吐槽一波。都什么年代了。现在都前后端分离，但是公司老项目非得用tp+layui。。

代码如下

php 复制代码

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

		//php代码渲染页面的时候，将一级分类id和二级分类id带过来，存到页面input框中，属性为hidden。方便获取这里js获取
        var first_category_id = $('#first_category_id').val()
        var second_category_id = $('#second_category_id').val()
        var third_category_id = $('#third_category_id').val()

        // 加载省份数据
        $.ajax({
            url: '',
            type: 'post',
            dataType: 'json',
            data: {parentId: 0},
            success: function (res) {
            	//这里是select下拉框的id
                var provinceSelect = $('#province');
                var citySelect = $('#city');
                var districtSelect = $('#district');

                $.each(res.data, function (index, item) {
                    if (item.id == first_category_id) {
                        provinceSelect.append('<option value="' + item.id + '" selected>' + item.name + '</option>');

                        $.ajax({
                            url: '',
                            type: 'post',
                            dataType: 'json',
                            data: {parentId: item.id},
                            success: function (res) {
                                $.each(res.data, function (index, item) {
                                    if (item.id == second_category_id) {
                                        citySelect.append('<option value="' + item.id + '" selected>' + item.name + '</option>');

                                        $.ajax({
                                            url: '',
                                            type: 'post',
                                            dataType: 'json',
                                            data: {parentId: item.id},
                                            success: function (res) {
                                                $.each(res.data, function (index, item) {
                                                    if (item.id == third_category_id) {
                                                        districtSelect.append('<option value="' + item.id + '" selected>' + item.name + '</option>');
                                                    } else {
                                                        districtSelect.append('<option value="' + item.id + '">' + item.name + '</option>');
                                                    }
                                                })
                                            }
                                        })
                                        form.render('select');
                                    } else {
                                        citySelect.append('<option value="' + item.id + '">' + item.name + '</option>');
                                    }
                                })

                            }
                        })
                        form.render('select');
                    } else {
                        provinceSelect.append('<option value="' + item.id + '">' + item.name + '</option>');
                    }
                });
                form.render('select');
            }
        });

        // 监听下拉框变化事件--这里和回显没有关系了 点击事件触发
        form.on('select(province)', function (data) {
            var provinceId = data.value;
            if (provinceId !== '') {
                // 加载数据
                $.ajax({
                    url: '',
                    type: 'post',
                    dataType: 'json',
                    data: {parentId: provinceId},
                    success: function (res) {
                        var citySelect = $('#city');
                        citySelect.empty().append('<option value="">请选择</option>');
                        $.each(res.data, function (index, item) {
                            citySelect.append('<option value="' + item.id + '">' + item.name + '</option>');
                        });
                        form.render('select');
                    }
                });
            } else {
                // 清空下面两级的数据
                $('#city').empty().append('<option value="">请选择</option>');
                $('#district').empty().append('<option value="">请选择</option>');
                form.render('select');
            }
        });

        // 监听下拉框变化事件--这里和回显没有关系了 点击事件触发
        form.on('select(city)', function (data) {
            var cityId = data.value;
            if (cityId !== '') {
                // 加载区县数据
                $.ajax({
                    url: '',
                    type: 'post',
                    dataType: 'json',
                    data: {parentId: cityId},
                    success: function (res) {
                        var districtSelect = $('#district');
                        districtSelect.empty().append('<option value="">请选择</option>');
                        $.each(res.data, function (index, item) {
                            districtSelect.append('<option value="' + item.id + '">' + item.name + '</option>');
                        });
                        form.render('select');
                    }
                });
            } else {
                // 清空区县数据
                $('#district').empty().append('<option value="">请选择</option>');
                form.render('select');
            }
        });

html代码

html 复制代码

<div class="layui-form-item">
   <label class="layui-form-label">商品分类：</label>
   <div class="layui-input-inline">
       <select name="first" id="province" lay-filter="province">
           <option value="">请选择</option>
       </select>
   </div>
   <div class="layui-input-inline">
       <select name="second" id="city" lay-filter="city">
           <option value="">请选择</option>
       </select>
   </div>
   <div class="layui-input-inline">
       <select name="third" id="district" lay-filter="district">
           <option value="">请选择</option>
       </select>
   </div>
</div>
         
 <input type="hidden" id="third_category_id" value="{$info.category_id}">
 <input type="hidden" id="second_category_id" value="{$info.second_category_id}">
 <input type="hidden" id="first_category_id" value="{$info.first_category_id}">