HTML下拉框绑定onchange事件方法

  请选择城市
  北京
  上海

用 addEventListener 绑定更灵活

相比内联 onchange，用 addEventListener 更利于解耦、复用和动态控制。尤其适合需要多次绑定、条件启用/禁用、或避免污染 HTML 的场景。

• 可以绑定多个监听器，不会覆盖
• 支持传参、箭头函数、this 绑定
• 方便配合 removeEventListener 清理（比如组件卸载时）
• 推荐在 DOM 加载完成后执行绑定，避免 getElementById 返回 null

  浅色主题
  深色主题

为什么 select.value 有时拿不到最新值？

典型陷阱：在 change 回调里用 this.value 或 e.target.value 拿到的仍是旧值——往往是因为你误用了 click 或 input 事件代替了 change，或者在表单提交前手动调用了 select.blur() 导致事件未正确冒泡。

• change 事件只在失去焦点且值确实变化后才触发（对 来说，等价于用户选完并移开焦点）
  如果想“实时响应”每次点击（比如快速切换），改用 input 事件 —— 但注意：多数浏览器对
  不支持 input，只有 Chrome 114+ 开始实验性支持
• 更稳妥的实时方案是监听 mousedown + blur 组合，或改用自定义下拉组件
• 确保没在事件处理中提前修改了 select.value，否则会干扰原始触发逻辑

React/Vue 中怎么处理 select change？

// React 示例
function MyForm() {
  const [selected, setSelected] = useState('');
  
  return (
     setSelected(e.target.value)}>
      --
      选项 A
    
  );
}