layui原生无级联选择器，需手动监听+动态加载+状态控制；form.on仅对已存在dom生效，动态生成select须延迟绑定或用原生事件委托；多级联动需reqid校验、禁用下级、禁用缓存；lay-search仅限最后一级且需手动接管；form.render应局部调用避免重置状态。
layui 原生没有「级联选择器」组件，所谓「layCascader」是第三方扩展或自定义封装，官方 form.select 不支持自动级联；必须手动监听 + 动态加载 + 状态控制，否则联动会断、选项错乱、请求覆盖。
为什么 form.on('select(xxx)') 不能直接链式写三级？
因为 layui 的 form.on 是事件委托注册，只对「已存在」的 DOM 生效。如果城市 select 是省份选中后才动态插入的，那你在页面初始化时写的 form.on('select(city)', ...) 根本不会触发——元素还没生成，监听就失效了。
- 正确做法：在省份请求成功、城市
select插入 DOM 后，**立刻执行**form.on('select(city)', callback)绑定 - 或统一改用原生事件委托：
layui.$('#formContainer').on('change', 'select[name="city"]', callback)，避开 layui 渲染时机问题 - 每次绑定前先解绑旧监听（尤其弹窗复用场景），避免重复请求：
layui.$('#formContainer').off('change', 'select[name="city"]')
如何防止第四级加载时第三级还没选完？
这是四级以上联动最常崩的点：用户快速切换“区”，多个 $.ajax 并发，后返回的响应把前一个街道列表干掉，UI 和数据彻底不一致。
- 给每级请求配唯一 ID：
let currentReqId = 0，每次发起前const reqId = ++currentReqId - 回调里严格校验：
if (reqId !== currentReqId) return，丢弃过期响应 - 请求发起前禁用下一级：
$('#street').prop('disabled', true).html('<option value="">加载中…</option>') - 务必加
cache: false，避免浏览器缓存旧响应干扰判断
lay-search 能不能和多级联动一起用？
能，但只能开在**最后一级**（如街道/社区），且必须放弃 lay-search="" 的自动行为，改用手动接管。
- 前三级保持纯
select，不加lay-search属性，否则form.on('select(xxx)')失效 - 最后一级改用独立搜索输入框 + 下拉列表模拟，不依赖原生
select；例如：<input type="text" id="streetSearch"><ul class="street-list"></ul> - 监听
input事件并防抖，关键词通过district_id+q参数发请求，后端模糊匹配 - 选中后手动设值：
form.val('myForm', { street: id })，并同步更新隐藏域供提交
form.render('select') 到底该不该用？怎么用？
必须用，但不能乱用。form.render('select') 是重绘整个表单模块，会重置所有 select 的状态（包括已选值、搜索焦点），四级联动里频繁调用等于自毁。
- 只重绘目标 select：
form.render('select', 'myFormFilter')，第二个参数是表单的lay-filter值 - 不要在每次请求成功后无脑调用，先清空再填 option 再 render，顺序错一步就白干
- 弹窗场景下，
form.render()必须限定作用域，否则会把页面其他区域的 select 全刷掉 - 实测四级联动全量 render 一次耗时 12–18ms，用户连点时卡顿明显，局部渲染是刚需
真正难的不是写几行 $.ajax，而是每个请求的生命周期是否可控、每次 UI 更新是否与当前上下文严格对应——漏掉一个 reqId 校验，或少一次 prop('disabled', true)，就足以让整个联动链在用户快速操作下瞬间崩溃。
