谷歌浏览器select下拉选项onclick事件失效的替代实现方案咨询

option 元素的 onclick 事件不属于HTML标准规范支持的行为，Firefox额外做了兼容支持，但Chrome、Edge等绝大多数主流浏览器均未实现该事件的触发逻辑，因此会出现跨浏览器表现不一致的问题。

推荐使用 <select> 标签原生支持的 change 事件替代，所有主流浏览器均兼容该方案：

• 第一步：修改HTML结构，移除所有option的onclick属性，给每个option新增value作为唯一标识，同时给select绑定change事件：

<select id="n1" onchange="handleNoteChange(this)">
  <option id="n1h" disabled selected hidden>First Note</option>
  <option id="n1o1" value="C">C</option>
  <option id="n1o2" value="Db">D&#9837;</option>
  <option id="n1o3" value="D">D</option>
  <option id="n1o4" value="Eb">E&#9837;</option>
  <option id="n1o5" value="E">E</option>
  <option id="n1o6" value="F">F</option>
  <option id="n1o7" value="Gb">G&#9837;</option>
  <option id="n1o8" value="G">G</option>
  <option id="n1o9" value="Ab">A&#9837;</option>
  <option id="n1o10" value="A">A</option>
  <option id="n1o11" value="Bb">B&#9837;</option>
  <option id="n1o12" value="B">B</option>
</select>

• 第二步：新增JS处理逻辑，建立标识和对应函数的映射关系，在change事件触发时匹配执行对应方法：

// 音符值与对应处理函数的映射表
const noteFunctionMap = {
  C: keyC,
  Db: keyDb,
  D: keyD,
  Eb: keyEb,
  E: keyE,
  F: keyF,
  Gb: keyGb,
  G: keyG,
  Ab: keyAb,
  A: keyA,
  Bb: keyBb,
  B: keyB
}

function handleNoteChange(selectElement) {
  const selectedNote = selectElement.value;
  if (noteFunctionMap[selectedNote]) {
    noteFunctionMap[selectedNote]();
  }
  // 若需要重复选择同一选项也能触发执行，可取消下方注释，每次执行后重置为默认提示项
  // selectElement.selectedIndex = 0;
}

可选优化写法 #

如果不想使用内联onchange属性，也可以用事件监听的方式绑定逻辑，更符合现代前端代码规范：

const noteSelect = document.getElementById('n1');
const noteFunctionMap = {
  C: keyC,
  Db: keyDb,
  D: keyD,
  Eb: keyEb,
  E: keyE,
  F: keyF,
  Gb: keyGb,
  G: keyG,
  Ab: keyAb,
  A: keyA,
  Bb: keyBb,
  B: keyB
}

noteSelect.addEventListener('change', function(e) {
  const selectedNote = e.target.value;
  if (noteFunctionMap[selectedNote]) {
    noteFunctionMap[selectedNote]();
  }
  // 可选：重置为默认提示项
  // e.target.selectedIndex = 0;
})

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