Layui下拉框需用val()设值、form.render()更新UI、dispatchEvent触发原生change事件才能激活form.on('select')回调；或直接调用封装的业务函数避免事件耦合。
layui 下拉框如何用 JS 触发 change 事件
直接调用 select.val() 不会触发绑定的 change 事件，这是最常踩的坑。Layui 的 form.select 是基于原生 select 封装的，DOM 操作和事件机制是分离的，必须手动触发或走 layui 的更新流程。
用 form.render() + 原生 dispatchEvent 触发真实 change
这是兼容性最好、最贴近用户真实操作的方式：先设值，再渲染表单，最后手动派发原生 change 事件。
-
select元素必须已初始化过（即执行过form.render('select')） - 先用
$('#your-select').val('xxx')设值，再调用form.render('select')更新 UI - 紧接着对原生 DOM 调用
dispatchEvent(new Event('change', { bubbles: true }))
$('#mySelect').val('2');
form.render('select', 'myFilter'); // 第二个参数是可选的 filter
document.getElementById('mySelect').dispatchEvent(
new Event('change', { bubbles: true })
);
避免只调用 select.val() 或 form.val() 就以为事件已触发
form.val('filterName', { 'field': 'value' }) 只更新 layui 内部缓存，不操作 DOM，也不触发任何事件；select.val() 改了 DOM 但 bypass 了 layui 的监听逻辑——两者单独用都不会让 form.on('select(xxx)', callback) 执行。
- 如果你绑的是
form.on('select(xxx)', ...)，它依赖的是 layui 对change事件的代理，不是原生监听 - 只改 value 不触发事件 → 回调函数不会运行，联动逻辑、校验、提交数据都可能出错
- 某些旧版 Layui（如 2.5.x）中，
form.render()后仍需手动 dispatch，不能省略
如果只是想执行回调逻辑，绕过事件机制直接调用
当触发时机明确、且不需要模拟用户行为时，更简单可靠的做法是：把业务逻辑抽成独立函数，需要时直接调用，而不是强求“触发事件”。
- 比如把下拉选择后的表格刷新、字段显隐封装为
handleSelectChange(value) - 在初始化后、异步加载完选项后、或手动设值后，直接
handleSelectChange('2') - 这样避开事件冒泡顺序、渲染延迟、Layui 版本差异等问题，调试也更直观
真正难的不是怎么“触发”，而是判断该不该触发——很多问题本质是把 UI 状态变更和业务逻辑耦合太死。Layui 的事件机制有延迟、有封装层级，硬塞进去不如拆开管。
