下拉选框onchange事件：文本相同值不同时如何触发？

开发者阿泽

2026-7-5

解决select选项文本相同时onchange不触发的问题

当<select>的多个选项文本相同但value不同时，默认的onchange事件可能无法检测到切换——部分浏览器会通过选项文本判断选中状态是否变化，而非value。以下是两种可行的解决方案：

方案一：监听mousedown事件，手动对比value变化

先记录当前选中的value，每次鼠标点击选项时，对比点击目标的value与记录值，若不同则执行业务逻辑并更新记录。

const selectEl = document.getElementById("my-select");
let currentValue = selectEl.value; // 初始化当前选中值

selectEl.addEventListener("mousedown", function(e) {
  const targetOption = e.target.closest("option");
  if (targetOption && targetOption.value !== currentValue) {
    // 执行你的业务逻辑，例如：
    alert(targetOption.value);
    currentValue = targetOption.value; // 更新当前选中值
  }
});

方案二：监听click事件，延迟检查选中value

利用setTimeout确保选中状态更新后，对比当前value与上一次记录值，触发对应逻辑。

const selectEl = document.getElementById("my-select");
let lastSelectedValue = selectEl.value;

selectEl.addEventListener("click", function() {
  setTimeout(() => {
    const currentValue = selectEl.value;
    if (currentValue !== lastSelectedValue) {
      // 执行你的业务逻辑，例如：
      alert(currentValue);
      lastSelectedValue = currentValue;
    }
  }, 0);
});