为<select>的<option>绑定onclick事件不生效该如何解决？

问题根因 #

• 绝大多数浏览器不支持<option>元素绑定onclick事件，所以你原有代码里绑定在option上的点击事件不会被触发。

解决方案 #

推荐使用<select>元素的onchange事件实现需求，以下是两种实现方式：

方案1：精简实现（无需声明多个函数）

直接读取选中项的内容赋值，可扩展性更高，后续新增选项不需要新增函数：

<label for="option">Option</label>
<select id="option" onchange="updateSelectedOption()">
    <optgroup>
        <option>Option A</option>
        <option>Option B</option>
    </optgroup>
</select>

<p>You choosed Option <span id="option-value"></span></p>

<script>
function updateSelectedOption() {
  const selectDom = document.getElementById('option')
  // 获取当前选中的option文本
  const selectedText = selectDom.options[selectDom.selectedIndex].text
  document.getElementById('option-value').innerText = selectedText
}
</script>

方案2：保留原有两个自定义函数

如果你的业务逻辑需要分别触发changeValueA、changeValueB两个独立函数，可以用以下写法：

<label for="option">Option</label>
<select id="option" onchange="optionChangeHandler()">
    <optgroup>
        <option>Option A</option>
        <option>Option B</option>
    </optgroup>
</select>

<p>You choosed Option <span id="option-value"></span></p>

<script>
function optionChangeHandler() {
  const selectedIndex = document.getElementById('option').selectedIndex
  // 根据选中项下标调用对应函数
  selectedIndex === 0 ? changeValueA() : changeValueB()
}

function changeValueA(){
  document.getElementById("option-value").innerHTML = "Option A";
}

function changeValueB(){
  document.getElementById("option-value").innerHTML = "Option B";
}
</script>

内容的提问来源于stack exchange，提问作者프로형