form.on('select(字段名)')是唯一可靠监听方式，因layui屏蔽原生change事件、接管交互逻辑；必须确保字段名与select的name属性完全一致，动态插入时需保留name且不被覆盖，二级select须带name并按清空→设空值→填充选项→render顺序操作。
直接用 form.on('select(字段名)') 监听一级 select 变化，再手动填充二级 select 并调用 form.render('select') —— 这是唯一可靠路径，其他方式（比如原生 change 事件、$.on('change')）在 layui 里根本不会触发。
为什么 form.on('select(xxx)') 是必须的
layui 把原生 select 的 change 事件屏蔽了，所有交互都走它自己的事件系统。你给 select 加 name="province"，就必须写 form.on('select(province)')，字符串必须完全一致，大小写、空格都不能错。
- 如果一级 select 是动态插入的（比如表格单元格模板里生成），确保它有
name属性，且没被后续 JS 覆盖或删掉 - 二级 select 也必须带
name，否则form.val()拿不到值；但它的option可以为空，等联动后再填 - 监听回调里的
data.value就是一级选中的值，别去 DOM 上反复取.val()，容易拿错
清空并重填二级 select 的正确顺序
用户换了一级选项，二级不能只删 option，否则 form.val() 还返回旧值，提交时就出错。
- 先用
$('#city').empty()清空所有option - 再用
$('#city').val('')把选中值设为空，高亮第一个<option value="">请选择</option> - 然后
$.each(data, ...)插入新option，注意 value 和显示文本别写反 - 最后必须执行
form.render('select')，否则 UI 不更新，用户看到的还是旧内容
ajax 加载二级数据时最容易漏的三件事
接口返回空、404 或格式不对，页面什么提示都没有，二级下拉框就一直空着——这是最常被忽略的静默失败。
- 在
$.ajax的error回调里补一句：$('#city').html('<option value="">加载失败</option>')，再form.render('select') - 后端返回结构要和前端匹配：如果前端
$.each(res.data, ...)，后端就得返回{data: [...]}，不能只返回数组或套多一层{code:0, data:[...]} - URL 别硬编码，用相对路径或配置变量，部署到子目录时 /api/city 会变成 /admin/api/city，硬写就 404
真正卡住人的从来不是联动逻辑本身，而是你改了 innerHTML 却忘了告诉 layui “它变了”；或是多个请求并发回来，后发的覆盖了先发的——这些状态同步和竞态问题，得靠请求 ID 或禁用 + 清空机制来兜底。
