Layui中select选中后触发AJAX需用form.on('select(filterName)')监听，绑定lay-filter属性，获取data.value发起请求，返回后清空非首项option、插入新选项并调用form.render('select')刷新。
select 选中后怎么触发 AJAX 请求
直接监听 form.on('select(filtername)')，这是 layui 提供的专用事件，比原生 change 更可靠——它在用户点击选项、键盘回车、甚至用鼠标拖拽选中时都会触发，且携带了完整的 data 对象（含 value 和 elem）。
常见错误是给 select 元素自己绑 change，但 Layui 渲染后会隐藏原生 select，真实交互发生在它生成的 .layui-form-select 面板里，原生事件可能不触发或延迟。
- 必须给
select设置lay-filter="xxx"，否则form.on()找不到监听目标 - 回调函数里的
data.value就是选中的值，别再用$(data.elem).val()多此一举 - 如果表单在弹窗或动态插入的 DOM 中，确保
form.on()在layui.use(['form'], ...)内执行，且 DOM 已就绪
如何避免重复请求和竞态问题
用户快速切换选项时，前一个 AJAX 还没返回，后一个已发出，结果旧响应覆盖新状态——典型竞态。Layui 本身不处理这个，得自己加控制。
最简方案是维护一个 lastXhr 引用，在发起新请求前调用 lastXhr?.abort()（注意：jQuery 1.9+ 支持，原生 fetch 需用 AbortController）；更稳妥的做法是加个 loading 状态锁：
- 请求开始前设
isPending = true，禁用目标下拉框：$(data.elem).prop('disabled', true) - 成功或失败后重置：
isPending = false，并恢复disabled - 在事件回调开头加判断：
if (isPending) return
别依赖 async: false，它已废弃且会阻塞 UI。
返回数据后怎么安全更新下游 select
拿到 AJAX 响应后，不能只写 $('#targetSelect').html(htmlStr) 就完事——Layui 的样式、点击逻辑、选中态全靠 form.render('select') 重建，漏掉这步，下拉框看起来有内容，点不动、选不中、甚至报 Cannot read property 'value' of undefined。
- 先清空非占位项：
$('#targetSelect option:not(:first-child)').remove()，避免重复叠加 - 追加新
option后，**必须**调用form.render('select')；如果有多个表单区域，加上 filter 值：form.render('select', 'yourFormFilter') - 若需默认选中某一项，除了
$('#targetSelect').val(value)，还得手动设selected属性：$('#targetSelect option[value="' + value + '"]').prop('selected', true) - 检查返回数据里有没有未转义的双引号或尖括号，会导致
html()插入失败且控制台静默（可用console.log(htmlStr)确认）
移动端下拉面板收不回去怎么办
AJAX 加载期间用户点了下拉框，面板展开；等请求回来调 form.render()，面板还开着，新选项看不见，用户得再点一次才刷新——这不是 bug，是 Layui 不自动管理面板开关状态。
解决办法是在发请求前主动收起：
- 执行
$('.layui-form-select dl').removeClass('layui-anim-upbit') - 同时清除高亮：
$('.layui-form-select dd').removeClass('layui-this') - 如果下游 select 也用了
lay-search，它的搜索输入框焦点也要手动 blur：$('#targetSelect').next().find('input').blur()
这些 DOM 操作得在 form.on('select(xxx)') 回调开头做，别等到 success 里——那时候面板早卡住了。
