layui实现无限级联动需动态创建select并绑定事件，禁用嵌套form.on、每级仅清空后续级并发起唯一请求，用通配符form.on('select(*)')统一监听，后端返回has_children标识末级。
layui下拉框如何触发多级联动（非固定三级）
layui 官方的 form.select 和 form.on('select(xxx)') 本身不支持“无限级”——它只监听单个 select 元素的变化，没有内置递归绑定或动态插入下一级 DOM 的机制。所谓“无限级联动”，本质是：用户选中第 n 级后，异步加载第 n+1 级选项，并自动渲染到页面上，且这个过程可重复多次。
用 form.on + AJAX 动态追加 select 元素
核心思路不是复用同一个 select，而是在前一级选择后，用 JS 创建新的 select 节点、插入到指定容器，并重新让 layui 表单模块识别它。常见错误是：新生成的 select 没调用 form.render('select')，导致无法监听其变化。
- 每次成功获取下一级数据后，拼一个带唯一
name和lay-filter的selectHTML 字符串（例如<select name="level_3" lay-filter="level_3"></select>） - 用
element.append()或原生insertAdjacentHTML插入到目标容器（如div#cascade-container）末尾 - 立即执行
form.render('select', 'filter-group')（若用了 lay-filter 分组）或form.render('select')全局重载 - 为新
select绑定独立的form.on('select(level_3)', callback)，回调里再发起下一级请求
如何避免循环绑定和内存泄漏
如果每次都写 form.on('select(xxx)') 而不清理，同一事件可能被重复绑定多次，导致一次选择触发 N 次请求。这不是 layui 的 bug，而是使用方式问题。
- 不要在每次创建 select 后都无条件调用
form.on；改用事件委托或统一监听父容器 - 推荐做法：只绑定一次
form.on('select(*)')（layui 2.8+ 支持通配符），然后在回调里用this.elem.name或this.elem.id区分当前触发的是哪一级 - 若需手动销毁某级 select，先移除 DOM，再调用
form.remove('select[name="level_3"]')（layui 2.9+）或直接删掉对应lay-filter的监听器引用（需自行维护） - 后端接口必须返回下一级是否有子项（如字段
has_children: true），否则最后一级仍会空转请求
后端返回结构与前端解析要点
layui 不关心你后端怎么设计，但前端解析时容易卡在字段名不一致或嵌套过深。典型错误是把树形数据直接塞进 options 数组，却忘了 value 和 title 必须是平铺字段。
- 后端建议返回扁平数组，每项含：
id（作为value）、name（作为显示文本）、pid（父级 ID，用于判断是否末级） - 前端收到数据后，不要直接
$.each(data, ...)拼option；用data.map(item => <option value="${item.id}">${item.name}</option>).join('')更安全 - 如果某级数据为空（如无子类），应清空后续所有已存在的
select元素并移除其事件绑定，否则用户可能看到“残留选项” - 注意
content-type：返回 JSON 时设为application/json，否则 jQuery 的dataType: 'json'可能失败，报错信息类似Unexpected token
