「市」「区」下拉框始终为空的最常见原因是dom更新后未手动调用form.render('select')触发layui重绘，且未同步清空value、移除disabled、触发change更新校验状态；需确保填入选项后立即渲染，并用字符串精确匹配pid过滤平铺数据。
为什么「市」「区」下拉框始终为空？
最常见原因是 DOM 更新了但 Layui 没重绘 UI。Layui 的 select 不监听内部 option 变更，必须手动触发渲染。
- 每次填完新
option后，立刻执行form.render('select')，否则界面上什么都不会变 - 别只用
$('#city').empty()，得补默认项：$('#city').empty().append('<option value="">请选择城市</option>') - 如果之前设过
disabled，记得同步移除：$('#city').prop('disabled', false)，否则即使有选项也点不动 -
trigger('change')必须跟上，否则lay-verify="required"的校验状态不会更新，旧错误提示残留
后端返回的省市区数据怎么接才不翻车？
别硬套嵌套 JSON（比如 {name: '北京', children: []}），平铺数组 + pid 字段最稳。
- 后端返回类似：
[{"id":"110000","name":"北京市","pid":"0"},{"id":"110100","name":"市辖区","pid":"110000"}] - 前端过滤用字符串精确匹配：
data.filter(item => item.pid === selectedProvinceId) - 注意类型：后端给的
id和pid是字符串，别传数字过去，===会永远不匹配 - 省级数据用
pid === '0'过滤，市级用上一级id当pid，区级同理
用户切了省，原来选的市/区还留在表单里怎么办？
UI 看着清空了，但 select 元素的 value 没变，提交时照样发旧值 —— 这是脏数据根源。
- 在省级
change回调里统一处理：清空下级 DOM +val('')+form.render('select')+form.validate()清除错误提示 -
$('#city').val('').trigger('change')缺一不可，trigger('change')是通知 Layui 表单模块值已变更 - 如果用了
lay-verify，不重置value会导致校验失败或提示残留
表格单元格内怎么放三级联动？
不能直接在 table 的 templet 里写 select 并绑定事件 —— 表格重绘、分页、排序时下拉框会丢失状态或事件。
- 正确做法：列设为只读文本（如显示“北京-朝阳区-三里屯”），点击触发
lay-event，用layer.open弹窗做闭环表单 - 弹窗内放三级
select，用change链式请求下级数据 - 每次请求前先清空下级
select并加<option value="">加载中</option> - 请求成功后，填完
option立刻调用form.render('select')，再用table.updateCell同步视图
真正麻烦的不是拼 option，而是确保每一步的 DOM 状态、JS 值、Layui 内部状态三者同步 —— 尤其是 form.render('select') 和 trigger('change') 这两个动作，漏一个就等于白干。
