如何检测select下拉选项的选中时机：选中值未变化时也能触发响应

• 用户点击select控件本体、展开下拉浮层的动作：触发的click事件的detail属性会记录本次连续点击的累计次数（比如快速连点两次select，第二次触发的click的detail值为2）
• 下拉浮层是浏览器独立渲染的弹出层，当浮层展开后，用户在浮层内点击任意选项完成选中时，这个点击动作派发回select元素的click事件，detail值永远为1，同时浮层会自动收回。

参考实现代码 #

const selectEl = document.querySelector("select");
// 记录下拉浮层的展开状态
let isDropdownOpen = false;

selectEl.addEventListener("click", (e) => {
  // 命中浮层展开后的选项点击动作时，执行对应处理逻辑
  if (isDropdownOpen && e.detail === 1) {
    // 无论选中值和之前是否一致，都会执行整套处理流程
    console.log("检测到用户完成选中动作，当前选中值：", e.target.value);
    // 执行完逻辑后重置状态标记
    isDropdownOpen = false;
    return;
  }
  // 命中用户点击select本体、展开浮层的动作，标记状态
  isDropdownOpen = true;
});

// 补充兼容键盘操作的选中场景
selectEl.addEventListener("keydown", (e) => {
  // 用户通过方向键选中选项后，按回车/空格确认的动作
  if (e.key === "Enter" || e.key === " ") {
    console.log("检测到用户通过键盘完成选中动作，当前选中值：", e.target.value);
  }
});

方案特点 #

• 完全不干预原生select的默认交互逻辑，完整保留原生控件自带的键盘导航、移动端适配、屏幕阅读器可访问性能力
• 代码量极低，不需要引入额外的自定义组件，无长期维护成本
• 该事件派发差异在所有主流现代浏览器上行为一致，不需要额外做兼容适配
• 在React等前端框架中使用时，仅需要把原生事件绑定替换为对应框架的合成事件绑定，核心逻辑完全通用

内容的提问来源于stack exchange，提问作者sjahan