layui三级联动需手动绑定form.on('select(name)')事件，清空并重载下级select后调用form.render('select')，异步加载时禁用下游select并统一接口字段，严格控制状态归零与DOM同步。
layui 中用 select 实现三级联动，必须手动绑定 change 事件
layui 的 form.select 并不自动支持级联更新，所谓“联动”得靠你监听一级 select 的 change，然后清空并重载下一级的 option。别指望 form.render('select') 能自动触发下级刷新——它只负责让 layui 样式生效，不处理数据逻辑。
常见错误是：改了二级 select 的 innerHTML 后忘了调用 form.render('select')，结果界面还是旧选项；或者没清空三级 select，导致残留上一次的数据。
- 每次更新下级
select前，先用$(selector).empty()清空所有option - 插入新
option后，必须显式调用form.render('select')，否则 layui 样式不更新 - 不要在
success回调外操作 DOM，异步加载省市区数据时尤其注意时序
省市区数据建议用 JSON 接口返回，而非全量内置
全国省市区数据约 4000+ 条，如果直接塞进页面 JS，会拖慢首屏、增加维护成本。更合理的方式是后端提供三个层级的接口：
-
/api/regions?level=1→ 返回省级列表（id,name） -
/api/regions?level=2&pid=110000→ 根据上级id查市级 -
/api/regions?level=3&pid=110100→ 查区级
注意：后端返回字段名要统一（比如都叫 code 和 name），避免前端反复适配。如果用 axios 或 $.ajax，记得加 loading 状态，防止用户连点触发多次请求。
初始化时禁用二级、三级 select，避免误选
一级未选时，二级和三级应处于不可用状态，否则用户可能提交空或错位的值。layui 不提供原生禁用联动支持，得手动控制：
- 初始 HTML 中给二级、三级
select加disabled属性 - 一级 change 后，移除二级的
disabled，并加载数据；等二级加载完，再移除三级的disabled - 某级切换时，下游所有级都要重置：
$(thirdSelect).empty().attr('disabled', true)
别漏掉 reset 行为——比如从“广东”切到“北京”，二级刚加载“北京市”，但三级还留着上次“广州市天河区”的选项，这是典型数据残留。
用 form.on('select(xxx)') 监听比原生 change 更可靠
layui 封装后的 select 是伪 DOM，原生 change 事件可能不触发。必须用 layui 的表单监听机制：
form.on('select(province)', function(data){
var pid = data.value;
// 加载城市...
});
注意：每个 select 的 name 属性必须唯一且与监听字符串一致，比如 对应 select(province)。如果 name 写成 prov 却监听 select(province)，事件永远不触发。
三级联动真正麻烦的不是代码量，而是每级加载完成后的状态归零、DOM 同步、用户交互反馈这三件事的节奏控制。稍一松懈，就会出现“点了省却没出市”“选了市但区灰着不能点”这类问题。
