JavaScript实现Div显隐：表单分类切换部分Div不生效问题修复

问题根源 #

你的代码存在以下关键错误，导致number_pregnancy对应的Div无法正常显示：

• 元素ID拼写错误：HTML中选择框的ID是category，但JS里用了document.getElementById("categorie")，拼写不一致导致无法获取正确元素。
• 选项值不匹配：JS里判断的是FemmeEnceinte，但HTML中目标选项的value是pregnant_wife，条件永远不成立。
• 未正确引用目标Div：没有获取divEnfants元素的DOM引用，且初始隐藏代码被注释。
• PHP选中状态判断错误：HTML选项value是pregnant_wife，但PHP里判断的是pregnantWife（驼峰式），导致编辑状态下无法正确选中并显示对应Div。

修正后的代码 #

1. HTML调整（修复PHP选中判断）

修改pregnant_wife选项的选中逻辑，让value和判断值一致：

<option value="pregnant_wife" <?php
if (!empty($patient->category)) {
    if ($patient->category == 'pregnant_wife') { // 改为下划线格式，与value匹配
        echo 'selected';
    }
}
?> > pregnant_wife </option>

2. JavaScript完整修正

// 正确获取DOM元素
const categorySelect = document.getElementById("category");
const divUsband = document.getElementById("divUsband");
const divEnfants = document.getElementById("divEnfants");

// 初始隐藏两个Div
divUsband.style.display = 'none';
divEnfants.style.display = 'none';

// 页面加载时检查初始选中状态（编辑场景自动显示对应Div）
function checkInitialState() {
    if (categorySelect.value === "pregnant_wife") {
        divUsband.style.display = 'block';
        divEnfants.style.display = 'block';
    }
}

// 选择框变化时的处理函数
function changeCategorie() {
    if (categorySelect.value === "pregnant_wife") {
        divUsband.style.display = 'block';
        divEnfants.style.display = 'block';
    } else {
        divUsband.style.display = 'none';
        divEnfants.style.display = 'none';
    }
}

// 页面加载完成后执行初始状态检查
window.addEventListener('load', checkInitialState);

3. 可选：用CSS实现初始隐藏（更可靠）

在CSS中添加初始隐藏样式，避免JS加载延迟导致元素短暂显示：

#divUsband, #divEnfants {
    display: none;
}

添加后可去掉JS里的初始隐藏代码，只保留状态切换逻辑。

额外优化建议 #

• 避免重复使用相同的id（多个输入框用了exampleInputEmail1），每个元素ID应唯一，否则会导致JS获取元素或表单提交异常。
• 函数命名保持一致，比如changeCategorie可改为changeCategory，与元素ID拼写统一。

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