推荐用document.querySelector('select').addEventListener('change', handler)直接绑定，支持多次触发；动态元素可用事件委托document.addEventListener('change', e => e.target.matches('select') && handler(e))；禁用onchange=内联写法。
怎样给 select 元素绑定 change 事件
直接用 addEventListener 绑定就行，不需要额外包装或防抖——change 事件本身只在用户真正切换选项后触发，不会像 input 那样频繁发生。
常见错误是写成 onclick 或监听 input，这两个都不适合下拉框：前者可能在未选中时就触发（比如点开下拉但没换选项），后者在 select 上基本不触发。
- 推荐写法：
document.querySelector('select').addEventListener('change', handler) - 如果元素是动态插入的，用事件委托：
document.addEventListener('change', e => { if (e.target.matches('select')) { /* 处理 */ } }) - 不要用
onchange="handler()"内联写法，不利于维护和复用
change 事件里怎么拿到选中的值和文本
event.target.value 拿到的是 option 的 value 属性值；event.target.selectedOptions[0].text 才是用户看到的显示文字。别误用 innerText 或 textContent，它们会把隐藏的 option 也拼进去。
- 安全取文本：
const selectedOption = e.target.selectedOptions[0]; const text = selectedOption ? selectedOption.text : ''; - 如果
select允许多选（带multiple），selectedOptions是类数组，需遍历 - 注意：
value是字符串类型，即使option的value="1"，拿到的也是"1"，不是数字
为什么有时候 change 不触发
最常见原因是用户只是点开了下拉菜单、又原样关闭，没真正切换选项——这时不会触发 change。这是浏览器标准行为，不是 bug。
- 测试时别只点开看，务必用鼠标或键盘切换到另一个
option再松手 - 如果初始
select有value但没设selected属性，第一个option会被默认选中，但此时 JS 读value可能为空字符串（取决于浏览器） - React/Vue 等框架中，如果用了受控组件，必须同步更新
valueprop，否则视图和状态不一致会导致事件“失效”
兼容性与移动端注意事项
change 事件在所有现代浏览器和 iOS/Android WebView 中都支持，包括旧版 IE9+。但移动端 Safari 有个细节：点击空白处关闭下拉框时，如果当前选项没变，依然不会触发 change——和桌面端一致。
- 不要试图用
click或focus替代change来模拟“打开即响应”，语义不符且不可靠 - 在 iOS 上，
select会唤起原生选择器，无法自定义样式；如需高度定制，得用 div + JS 模拟，那就完全不用change了 - 如果页面启用了
user-scalable=no，部分安卓 WebView 可能延迟触发change，建议去掉该 meta 设置
关键点其实就一个：确保你监听的是用户「完成选择」这个动作，而不是「开始操作」。很多问题源于混淆了交互意图和事件语义。
