Layui二级联动必须用form.on('select(字段名)')监听，字段名需与name属性完全一致；原生change事件无效，因select被div+ul模拟且真实元素隐藏；清空二级下拉框需empty()、val('')并调用form.render('select')同步UI。
二级联动在 Layui 里不是靠监听 change 事件就能跑通的——原生事件被屏蔽了，必须用 form.on('select(字段名)')，且字段名要和 name 属性完全一致，否则监听不到任何变化。
为什么 $('#xxx').on('change') 不生效
Layui 的 select 是用 div + ul 模拟出来的，真实 select 元素被隐藏了，DOM 上的 change 事件根本不会触发。你绑了也白绑。
- 必须用
form.on('select(province)', callback)，其中province是一级select的name值 -
name值不能带空格、点号或特殊字符，比如area.name或user-select都会失败 - 如果一级
select是后续 JS 动态插入的，确保插入时已带name，且没被后续代码删掉或覆盖 - 回调里的
data.value是选中项的value属性值，不是文本内容
联动时二级下拉框为空或残留旧值
清空二级 select 不是只删 option 就完事——Layui 渲染后，UI 和 DOM 状态不同步，用户看到的还是上次的选项，form.val() 也可能返回脏数据。
- 先清空所有
option：$('#city').empty() - 再重置选中状态：
$('#city').val('')（前提是第一个option是<option value="">请选择</option>） - 最后必须调用
form.render('select')，否则新插入的option不显示，也不可点击 - 如果二级
select有lay-search，清空后也要确保搜索框输入被重置，否则可能残留关键词
接口返回数据格式错导致循环失败
常见错误是后端返回了带包装结构的 JSON，比如 {code: 0, data: [...]}，但前端直接塞给 $.each(resData, ...)，结果 resData 是个对象，循环不出东西。
- 检查接口响应体，确认你真正要遍历的是哪一层，比如
resData.data或resData.list - 加一层防御：if (!Array.isArray(resData.data)) { console.error('二级数据非数组:', resData); return; }
- 避免硬编码 URL：
url: '/api/city?province=' + provinceId比url: 'http://localhost:8080/getCity'更安全，部署时不易 404 - 在
error回调里兜底：$('#city').html('<option value="">加载失败</option>'); form.render('select');
表格内单元格联动容易丢失状态
在 layui.table 的 templet 里直接写 select 标签，分页、排序、reload 时 DOM 会被销毁，事件绑定丢失，联动就断了。
- 不要在表格列里直接渲染可交互的
select，改用lay-event触发layer.open弹窗，在弹窗里做完整三级联动 - 如果坚持嵌入，每次更新前必须用
$(tr).find('[name="city"]')定位当前行目标元素，手动.val(newVal)并同步table.cache - 联动成功后，别调
table.reload()，用table.updateCell({id: 'yourTable', field: 'city', value: newVal, rowIndex: i})只刷新单格 - 弹窗提交后，记得手动更新缓存：
table.cache['yourTable'][rowIndex].city = newVal
最常被忽略的点是：你改了 innerHTML，但没告诉 Layui “它变了”。form.render('select') 这一步漏掉，UI 就永远卡在旧状态。不是逻辑错，是状态没同步。
