关于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}">
相关推荐
一念&3 小时前
每日一个网络知识点:网络层NAT
服务器·网络·php
LXMXHJ5 小时前
php开发
开发语言·php
武昌库里写JAVA7 小时前
C语言 函数指针和指针函数区别 - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
Jtti8 小时前
SSH连接服务器超时?可能原因与解决方案
服务器·网络·php
小糖学代码10 小时前
网络:3.Socket编程TCP
网络·tcp/ip·php
BingoGo14 小时前
PHP8.5 的新 URI 扩展
后端·php
JaguarJack15 小时前
PHP8.5 的新 URI 扩展
后端·php
、花无将1 天前
PHP:配置问题从而导致代码运行出现错误
开发语言·php
zorro_z1 天前
ThinkPHP8学习篇(九):模型(一)
php
武昌库里写JAVA1 天前
C语言 #pragma once - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计