点击选择框选项时迭代切换显示不同Div的问题排查

问题根源 #

你的代码存在几个关键问题导致切换异常：

• onchange事件绑定在了外层div上，而非select元素，事件无法正确触发
• 函数中直接用DOM元素myselect和字符串比较，应该取myselect.value判断选中项
• div和select重复使用了id="malattie"，HTML中ID必须唯一
• 切换回"Nothing"时，没有清空alert容器的内容，导致旧提示残留

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="col-md-12 malattie">
        <label>Are you affected by one of the following conditions?</label>
        <!-- 把onchange移到select上，修正重复ID问题 -->
        <select id="malattieSelect" onchange="change(this)">
            <option value="Nothing">Nothing</option>
            <option value="Pancreatitis">Pancreatitis</option>
            <option value="Glycemia">Glycemia</option>
        </select>
        <div id="alert"></div>
        <div id="form_nodisease">It's ok</div>
    </div>
    <script>
        function change(myselect){
            const alertEl = document.getElementById("alert");
            const formNoDiseaseEl = document.getElementById("form_nodisease");
            
            if(myselect.value !== "Nothing"){
                formNoDiseaseEl.style.display = 'none'; 
                alertEl.textContent = "We are sorry but for this disease you must consult a doctor";
            }else{
                formNoDiseaseEl.style.display = 'block'; 
                // 清空提示文本
                alertEl.textContent = "";
            }
        }
    </script>
</body>
</html>

关键修改说明 #

1. 修正事件绑定：将onchange="change(this)"从div移到select元素上，确保选择框变化时能触发函数
2. 正确获取选中值：用myselect.value获取选择框的选中值，而非直接比较DOM对象
3. 修复重复ID：把select的ID改为malattieSelect，避免和外层div的class冲突
4. 清空提示内容：切换回"Nothing"时，通过alertEl.textContent = ""清除之前的提示文本，同时恢复"It's ok"的显示
5. 优化DOM元素获取：提前获取DOM元素，避免重复调用getElementById，提升性能

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