必须手动监听 change 事件。Layui 原生 select 不支持 data-url，需用 form.on('select(xxx)', callback) 实现联动，配合 layui.ajax 加载数据、清空 option、填入选项并调用 form.render('select') 同步 UI。
layui select 联动依赖 data-url 还是必须手动监听 change？
必须手动监听 change 事件。layui 的 select 本身不内置级联逻辑，data-url 是某些第三方扩展或自定义模块的写法，原生 layui（v2.9.x）的 form.select 不识别该属性。联动得靠你绑定 form.on('select(xxx)', callback)，并在回调里清空下级、重载选项、重新渲染。
如何用 layui.ajax 加载省市区数据并动态填充 select？
推荐用 layui.ajax（比原生 fetch 更兼容旧版浏览器），注意三点：返回数据结构要扁平（如 [{value: '110000', title: '北京市'}, ...]），每次填充前必须先清空 option，且填完后调用 form.render('select') 同步 UI。否则新选项不可见或无法触发后续事件。
常见错误现象：select 看似更新了，但点击无反应，或选中后值为空——基本都是漏了 form.render('select')。
- 省份请求成功后，用
$('#province').html('...')或$('#province').empty().append(...)替换所有option - 务必在
success回调里执行form.render('select', 'your-filter')，第二个参数是所在 form 的lay-filter值 - 城市/区县请求时，把上一级的
value（如省 code）作为参数传过去，后端据此查下级
为什么选完省之后城市 select 没变化，但控制台没报错？
大概率是事件绑定时机不对。如果城市 select 是后来动态插入 DOM 的（比如从空容器开始），而你在页面加载时就写了 form.on('select(city)', ...)，那这个监听根本不会生效——因为元素还不存在。
解决办法只有两个：
- 把监听代码放到城市
select插入 DOM 之后再执行（例如在省份请求成功的回调末尾） - 或者统一用事件委托：给父容器（如
form）绑定change原生事件，再用event.target.name === 'city'判断，避开 layui 的事件注册机制
另外检查是否重复调用了 form.render()，多次渲染可能让已绑定的事件被覆盖。
省市区三级联动时，如何避免“区县”下拉框残留上一次城市的选项？
关键动作不是“清空”，而是“重置 + 隐藏 + 渲染”。很多人只做 $('#district').empty()，但没处理默认提示项（如 <option value="">请选择区县</option>），也没隐藏它——导致用户看到空白选项或旧值残留。
- 每次切换上级时，先设下级
select的disabled属性为true，并隐藏其容器（layui-form-select的下拉面板） - 清空所有
option，插入新的提示项：<option value="">请选择区县</option> - 再调用
form.render('select')，最后移除disabled并显示容器 - 如果用的是异步加载，建议加 loading 状态（比如临时替换
option为<option value="">加载中...</option>）
最易忽略的点：区县数据为空时（比如某个城市没有下属区），仍要保留提示项并允许提交——别直接删光 option 导致表单校验失败。
