嘿，这个问题我之前也碰到过！原生的<select>元素的change事件本来就是只有当选中的选项和之前的不一样时才会触发，所以重复选同一个选项自然不会触发啦。先看看你的下拉框截图：

给你几个实用的解决办法：

方法1：用click事件配合状态记录 #

通过记录上一次选中的值，在点击下拉框时判断是否重复选中同一选项：

// 记录最后选中的值
let lastSelectedValue = '';
const selectElement = document.getElementById('your-select-id');

selectElement.addEventListener('click', function() {
  const currentValue = this.value;
  // 如果当前选中值和上次一致，执行重复选中的逻辑
  if (currentValue === lastSelectedValue && currentValue !== '') {
    console.log('重复选中了同一个选项！');
    // 这里替换成你需要执行的代码
  }
  // 更新最后选中的值
  lastSelectedValue = currentValue;
});

注意：点击下拉框展开面板时也会触发click事件，如果想只在点击选项时触发，可以判断点击目标是否为<option>标签。

方法2：重置选中状态强制触发change #

通过临时切换选中项，让重复选择时也能触发原生change事件：
首先给下拉框添加一个默认的禁用空选项：

<select id="lang-select">
  <option value="" disabled selected>请选择语言</option>
  <option value="en">English</option>
  <option value="zh">中文</option>
</select>

然后添加事件监听：

const selectElement = document.getElementById('lang-select');

selectElement.addEventListener('mousedown', function() {
  const currentValue = this.value;
  // 如果当前不是默认空选项，临时切换为空选项
  if (currentValue !== '') {
    this.value = '';
    // 在下一个事件循环恢复原选中值，确保点击同一选项时值发生变化
    setTimeout(() => {
      this.value = currentValue;
    }, 0);
  }
});

// 正常监听change事件即可
selectElement.addEventListener('change', function() {
  console.log('选中的选项值：', this.value);
});

方法3：自定义事件（更灵活） #

封装一个自定义事件，不管是否重复选中，点击选项就触发：

const selectElement = document.getElementById('your-select-id');

// 监听选项点击，触发自定义事件
selectElement.addEventListener('click', function(e) {
  if (e.target.tagName === 'OPTION') {
    this.dispatchEvent(new CustomEvent('select-option-click', { 
      detail: { 
        value: e.target.value, 
        text: e.target.textContent 
      }
    }));
  }
});

// 监听自定义事件
selectElement.addEventListener('select-option-click', function(e) {
  console.log('选中的选项文本：', e.detail.text);
  console.log('选中的选项值：', e.detail.value);
  // 这里执行你的业务逻辑
});

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