如何在HTML中通过select下拉选项调用JavaScript函数

问题根因 #

<option> 元素的 onclick 事件存在严重的兼容性问题，绝大多数桌面端、移动端浏览器都不会触发该事件，这就是你代码无报错但函数不执行、元素不显示的核心原因。

修正方案 #

将交互事件绑定到 <select> 元素的 onchange 事件上，触发后判断当前选中的选项值，再控制目标区域的显隐即可，修正后完整代码如下：

<body onload="toggleCheckbox()">    

<script>
function toggleCheckbox() {
    const selectVal = document.querySelector('select[name="etat"]').value;
    // 这里配置需要触发显示复选框的选项值
    const showValues = ['Accepté', 'Refusé', 'Activé'];
    if (showValues.includes(selectVal)) {
        document.getElementById("checkbox").style.visibility = "visible";
    } else {
        document.getElementById("checkbox").style.visibility = "hidden";
    }
}
</script>

<div>
    <span >Etat de la candidature</span>
    <!-- 把事件绑定到select的onchange上 -->
    <select name="etat" onchange="toggleCheckbox()">
       <option  value="En cours">En cours de traitement</option>
       <option value="Accepté">Accepté</option>
       <option value="Refusé">Refusé</option>
       <!-- 补充你需求里提到的Activé选项 -->
       <option value="Activé">Activé</option>
   </select>
</div>                   
<div id="checkbox" >
   <span>Envoyer un email automatique </span>
   <input type="checkbox" name="check" id="check" value="Envoyer un email automatique">
</div>
</body>

调整说明 #

• 移除了所有<option>上的无效onclick绑定，统一通过<select>的onchange事件触发逻辑
• 新增的toggleCheckbox函数支持自定义配置需要显示复选框的选项值，可根据实际需求调整showValues数组内容
• 初始加载和切换选项时都会执行判断，保证显隐状态始终和当前选中值匹配
• 如果你不需要选中其他选项时隐藏复选框，可删除else分支的隐藏逻辑即可

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