Layui下拉框无限级联动依赖状态管理而非官方插件，需动态生成带唯一name和data属性的select、每次append后调用form.render('select')、用reqId防并发错乱、仅最后一级启用lay-search并配合防抖异步搜索。
layui下拉框无限级联动不是靠插件，而是靠状态管理
没有官方“无限级联动插件”，Layui 本身不提供开箱即用的无限级 select 联动能力。所谓“无限级”，本质是动态生成下一级 select 元素并绑定事件，而不是调用某个封装好的 renderCascade() 函数。你看到的“插件”多是社区基于 form.on('select(xxx)') + 递归请求封装的工具函数，但核心逻辑仍需自己控制。
动态创建下一级 select 必须带唯一 name 和 data 属性
每新增一级下拉框，name 不能重复（如 level1、level2、level3），且必须通过 data-parent-id 或 data-level 标记上下文，否则 change 回调里无法知道“当前是谁、该加载谁”。
- 每次 append 新
select后，立即执行layui.form.render('select')，否则 layui 不识别它 - 不要用
layui.$(parent).append(html)直接拼字符串——容易 XSS，改用layui.$(' - 新
select的初始option必须包含，避免用户误点空白项
防并发错乱：每个请求配独立 requestId 并做比对
用户快速连点三级菜单时，第二级请求还没返回，第三级请求已发出，结果后发先至，导致“海淀区”下显示“朝阳区”的街道列表——这是无限级联动最常崩的点。
- 每次发起请求前生成唯一 id：
const reqId = Date.now() + Math.random().toString(36).substr(2, 5) - 把
reqId存在select元素上：layui.$(newSelect).data('req-id', reqId) - success 回调里先比对：
if (reqId !== layui.$(thisSelect).data('req-id')) return - 失败或超时时清空对应
select并还原为
最后一级才开 lay-search，前面全禁用
lay-search 和联动天然冲突：输入触发的是 input 事件，不是 change；选中后 form.on('select(xxx)') 不触发，value 拿不到真实选项 ID。强行全级开启会导致联动链断裂。
- 只给最后一级（比如“社区”）的
select加lay-search属性，其他级一律不加 - 最后一级的数据必须走异步搜索接口，不能本地 filter——否则切换上级后，缓存结果还是旧区的
- 搜索输入要防抖（
setTimeout+clearTimeout），避免每敲一个字都发请求 - 搜索返回后，手动填充
option，再调layui.form.render('select')，不能只改innerHTML
真正难的不是写几行请求代码，而是让每一级的 DOM 生命周期、请求状态、UI 加载态、用户操作反馈全部对齐。少一个 form.render('select')，就卡住；漏一次 reqId 比对，就错乱；忘了清空下级 select，就残留脏数据。
