layui select 级联必须手动监听 change 事件，唯一入口是 form.on('select(name)')；需确保 dom 存在后注册监听、清空重填 option、调用 form.render('select', 'filter') 同步状态，并用请求 id 避免响应错乱。
必须手动监听 change 事件，Layui 原生 select 不识别 data-url，也不自动处理级联逻辑。
form.on('select(xxx)') 是唯一可靠入口
所有联动起点只能是这个监听器，不能依赖属性自动加载，也不能在 change 回调里嵌套写另一级的 form.on —— 那是监听注册，不是执行逻辑，会导致重复绑定、事件错乱。
- 每个
select必须有明确的name（如province、city），才能被form.on('select(province)')正确捕获 - 监听代码要放在 DOM 存在之后执行；如果下级
select是异步插入的（比如空容器后续填充），那它的监听也得在插入后才注册 - 避免全局污染：用闭包或模块作用域管理请求 ID、loading 状态等变量，别堆在
window上
每次联动都得清空 + 重填 + render
漏掉任意一步，UI 就不同步。常见现象是 option 看似更新了，点开却空白或无法选中——基本都是没调 form.render('select')。
- 清空前先设
disabled并填入占位项：$('#city').prop('disabled', true).html('<option value="">加载中…</option>') - 数据返回后，先
.empty()或.html('')，再.append()新option，注意保留默认空选项 - 必须立刻执行
form.render('select', 'your-filter')，第二个参数是所在form的lay-filter值，否则只渲染局部无效 - 别用
form.render()全量重绘，会重置其他已选值，尤其影响带lay-search的 select
多级联动时最易崩的是请求顺序和状态残留
用户快速连点「省」，发出两个城市请求，后返回的覆盖前一个，结果「北京市」点出来显示的是「杭州市」的选项 —— 这不是 bug，是你没做请求对齐。
- 给每级请求配唯一标记：比如
let cityReqId = 0，每次发起前++cityReqId，存进data-request-id或闭包 - 回调里先比对响应中的
requestId是否等于当前cityReqId，仅匹配才更新 DOM 和渲染 - 每次切换上级时，不仅要清空下级
option，还要重置其value并触发trigger('change')，否则提交仍发旧值 - 后端接口尽量统一为
/api/areas/children?parent_id=xxx&level=2，别为每级写独立路径，减少前端路由判断
真正卡住人的从来不是怎么拼 option，而是 DOM、JS 值、Layui 内部表单状态这三者没对齐 —— 尤其是 form.render('select') 和 trigger('change')，少一个，联动就断在半路。
