必须通过 form.on('select(你的 lay-filter 值)') 绑定下拉框 change 事件，且 select 元素必须设置 lay-filter 属性，否则无法触发监听。
layui下拉框 change 事件怎么绑定
layui 的 select 元素默认不自动触发原生 change，必须通过 form.on('select(你的 lay-filter 值)') 监听。漏写
lay-filter</code 或写错值，监听就完全失效。</p> <p>确保 select 标签里有 <code>lay-filter="city"这类唯一标识，然后在 JS 中用相同字符串注册监听：
form.on('select(city)', function(data){
console.log(data.value); // 当前选中的 value
});
-
data.value是 option 的value属性值，不是文本内容 - 如果 option 没设
value，会取文本内容（但不推荐依赖这个行为） - 该回调在用户手动选择后立即触发，不等表单提交
在 select 监听里发 Ajax 请求要注意什么
直接在 form.on('select(...)') 回调里调 $.ajax 或 fetch 即可，但几个关键点常被忽略：
- 避免重复请求：用户快速切换选项时，上一个请求可能还没返回，新请求又发出——加个
let xhr;+xhr && xhr.abort();控制（jQuery）或用AbortController（原生） - 空值处理：首次加载或清空选项时，
data.value可能是空字符串或undefined，要显式判断再发请求 - 加载状态反馈：建议禁用下拉框（
$(this.elem).prop('disabled', true)）或加 loading 提示，否则用户可能误点多次
layui 重新渲染 select 后事件丢失怎么办
用 form.render('select') 或 form.render() 更新下拉框后，之前绑定的 form.on('select(...)') 依然有效——layui 的事件委托机制保证了这点。真正出问题的情况是：
- 你手动用
innerHTML替换了整个 select 标签（绕过了 layui 渲染流程），此时必须重绑事件 - 动态插入新 select 且没调
form.render()，导致 layui 未识别为可交互元素 - 监听代码写在
form.render()之前，造成监听注册时机过早（应确保 DOM 和 form 模块都就绪）
稳妥做法：把 form.on 放在 layui.use(['form'], callback) 的回调里，并确认 form.render() 已执行。
请求成功后怎么更新另一个下拉框
典型级联场景：省 → 市。拿到市列表后，要清空并重写第二个 select 的 option，再调 form.render('select') 使其生效：
$.get('/api/cities?province=' + data.value, function(res){
var $sel = $('#city-select');
$sel.empty().append('<option value="">请选择城市</option>');
$.each(res.data, function(i, item){
$sel.append('<option value="' + item.id + '">' + item.name + '</option>');
});
form.render('select', 'city-form'); // 第二个参数是所在 form 的 lay-filter
});
- 务必调
form.render('select', 'xxx')，否则新 option 不可点击 - 如果目标 select 在独立 form 容器里，第二个参数必须匹配其
lay-filter；若不在 form 内，可省略第二个参数 - 不要用
$('#city-select').val(xxx).trigger('change')——layui 的 select 不响应原生 change
最易被忽略的是：级联时后一个 select 的初始状态（比如 disabled 或 placeholder）要在 Ajax 返回前就准备好，而不是等数据回来才去操作 DOM 结构。否则用户看到空白下拉框+无提示，会以为功能卡住。
