监听下拉框值改变最常用可靠的方式是 change 事件，它在用户手动切换选项并失去焦点或回车确认时触发；可通过 event.target.value 获取选中值，且动态增删 option 无需重新绑定监听器。

在 JavaScript 中监听下拉框（<select></select> 元素）值改变，最常用、最可靠的方式是监听 change 事件。

用 change 事件监听选中值变化

change 事件在用户手动切换选项并失去焦点（或回车确认）时触发，语义准确，兼容性好，是首选方案。

• 对 <select></select> 元素添加 addEventListener('change', handler)
• 在事件处理函数中，通过 event.target.value 获取当前选中的值
• 也可用 event.target.selectedOptions[0]?.value 获取选中 option 的 value，多用于有 optgroup 或需额外属性的场景

示例：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

  苹果
  香蕉


<script><br> const select = document.getElementById('mySelect');<br> select.addEventListener('change', function(e) {<br> console.log('当前选中：', e.target.value); // 如 'banana'<br> });<br> </script>

注意 input 事件不适用于普通下拉框

input 事件通常用于实时输入（如 <input>、<textarea></textarea>），但对原生单选 <select></select> 不会触发——它不会在每次键盘导航或鼠标悬停时触发，只有在值真正提交后才由 change 捕获。所以不要误用 input 监听下拉框。

需要“实时响应”键盘导航？慎用 focus + keydown 组合

如果业务要求在用户用方向键高亮选项（尚未回车/点击）时就响应，原生 <select></select> 不支持这种细粒度控制。此时建议：

• 改用自定义下拉组件（如基于 <div> + <code><ul></ul> 实现）
• 或监听 keydown 并结合 focus 状态粗略判断，但无法 100% 可靠获取“即将选中”的值
• 多数场景下，坚持用 change 更符合用户预期和可访问性标准

动态添加选项后记得重新绑定？不需要

change 是事件委托友好型事件。只要事件监听器绑定在 <select></select> 上，后续动态增删 <option></option> 都无需重绑——因为事件发生在父元素上，不是每个 option 单独监听。