js下拉框选中触发事件

用原生 JavaScript 监听下拉框选中事件，下拉最直接的框选写法就是给 <select> 绑 change。别用 click，中触别用 input，发事至少在桌面浏览器上 change 才是下拉那个真正靠谱的事件。我见过有人图省事绑 click，框选结果键盘操作选完值之后事件根本不触发，中触用户用 Tab 键加方向键选完，发事页面一点反应没有，下拉这种 bug 藏得深，框选测试不特意走键盘流程根本发现不了。中触

先看一段能跑的发事代码：

<select id="city"> <option value="">请选择城市</option> <option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">广州</option> </select> <script> const sel = document.getElementById('city'); sel.addEventListener('change', function (e) {  console.log('选中的 value:', e.target.value); console.log('选中的文本:', e.target.options[e.target.selectedIndex].text); }); </script> 

这里有个细节值得说：e.target.value 拿的是 value 属性，如果 <option> 没写 value，下拉浏览器会把 option 的框选文本内容当作 value 返回。这个行为在不同浏览器里表现一致，中触但很多人不知道，写代码时容易多此一举地去取 selectedIndex 再查文本。取文本可以用 sel.options[sel.selectedIndex].text，这是老派写法，兼容性最好。

再说一个坑：动态往 select 里插 option 的时候，如果插完立刻手动设置 selectedIndex，change 事件不会自动触发。浏览器只认用户交互触发的变更。想在代码里改选中项并触发逻辑，得手动派发事件：

sel.selectedIndex = 2; sel.dispatchEvent(new Event('change')); 

或者用 sel.value = 'gz' 赋值，再手动触发。这个手动派发在联动下拉框场景里特别常见——第一个下拉框选了省份，代码去更新第二个下拉框的城市列表，同时希望第二个下拉框的 change 逻辑也跑一遍。不手动 dispatch，第二个框的联动就不会生效。

移动端的情况稍微不同。iOS 和 Android 上 change 事件通常没问题，但有些安卓 WebView 里，用户滚动选择器时 change 会在滚动过程中连续触发，而不是等用户点“确定”才触发一次。如果你的 change 回调里有网络请求，这就可能瞬间打出十几个请求。解决办法是用防抖，或者监听 blur 配合值比对。我一般直接加个 150ms 的 debounce，简单有效。

如果项目里用了 jQuery，写法是 $('#city').on('change', fn)，本质一样。Vue 里用 v-model 加 @change，React 里用 onChange 受控组件，底层都还是这个 change 事件。框架帮你处理了值同步，但事件触发时机没变。

还有个小众但真实的需求：用户选了和当前一样的选项，change 不会触发。这是规范行为，值没变就不算变更。如果你需要“每次点击都响应”，那得监听 click 或者 focus 配合记录旧值，但这种需求本身就不太合理，产品经理提的时候你得反问一句为什么要这样。

最后补一个取值的稳妥写法，避免空选报错：

sel.addEventListener('change', function () {  const idx = this.selectedIndex; if (idx < 0) return; const opt = this.options[idx]; doSomething(opt.value, opt.text); }); 

别小看这几行，用户快速连点或者用脚本操作时，selectedIndex 为 -1 的情况真会出现。加个判断，省得线上报错。