如何通过数据库加载的SELECT选项控制DIV的显示与隐藏？

核心问题梳理 #

以下是代码中导致功能失效的关键错误：

1. 下拉框选项值固定错误 #

动态生成的<option>标签value被硬写为"category"，导致无论选择哪个选项，获取到的值都是category，永远无法匹配Fe_Ence。

修正后的下拉框关键代码：

<option value="<?php echo $category->category; ?>">
    <?php
    $isSelected = false;
    if (!empty($setval) && $category->category == set_value('category')) {
        $isSelected = true;
    }
    if (!empty($patient->category) && $category->category == $patient->category) {
        $isSelected = true;
    }
    echo $isSelected ? 'selected' : '';
    ?>
    <?php echo $category->category; ?>
</option>

2. JS选择器错误 #

原JS代码用$("select.p_category option:selected").val()获取值，但下拉框的class是form-control m-bot15，不存在p_category这个类，无法正确获取选中值。直接使用当前元素$(this).val()更高效。

修正后的JavaScript代码：

$(document).ready(function () {
    $('.divUs').hide();
    $(document.body).on('change', '#p_category', function () {
        var selectedValue = $(this).val();
        $('.divUs').toggle(selectedValue === 'Fe_Ence');
    });
});

3. 目标DIV缺少指定类名 #

需要控制显隐的DIV没有添加divUs类，导致JS无法定位元素，无法执行显隐操作。

修正后的目标DIV代码：

<div class="divUs">
    <label for="exampleInputEmail1"><?php echo lang('name_Us'); ?></label>
    <input type="text" class="form-control" name="name_husband" id="nameUs" placeholder="">
                       
    <label for="exampleInputEmail1"><?php echo lang('number_pre'); ?></label>
    <input type="number" class="form-control" name="number_pre" id="nbreEnf" placeholder="">
</div>

4. 选中状态逻辑重复 #

原代码两个独立if判断都会输出selected，可能导致同一个<option>出现多个selected属性，不符合HTML规范，合并为单一条件判断更严谨（已包含在第一部分修正代码中）。

完整修正后代码片段 #

下拉选择框完整代码 #

<div class="modal-body row">
<form role="form" action="patient/addNew" class="clearfix" method="post" enctype="multipart/form-data">
<div class="form-group col-md-6">
  <label for="exampleInputEmail1"><?php echo lang('categorie'); ?></label>
     <select class="form-control m-bot15" name="categorie" id="p_category">
          <option value="#"> Sélectionner catégorie</option>
             <?php foreach ($categories as $category) { ?>
              <option value="<?php echo $category->category; ?>">
                  <?php
                  $isSelected = false;
                  if (!empty($setval) && $category->category == set_value('category')) {
                      $isSelected = true;
                  }
                  if (!empty($patient->category) && $category->category == $patient->category) {
                      $isSelected = true;
                  }
                  echo $isSelected ? 'selected' : '';
                  ?>
                  <?php echo $category->category; ?>
              </option>
             <?php } ?> 
          </select>
        </div>

控制显隐的DIV代码 #

<div class="divUs">
    <label for="exampleInputEmail1"><?php echo lang('name_Us'); ?></label>
    <input type="text" class="form-control" name="name_husband" id="nameUs" placeholder="">
                       
    <label for="exampleInputEmail1"><?php echo lang('number_pre'); ?></label>
    <input type="number" class="form-control" name="number_pre" id="nbreEnf" placeholder="">
</div>

JavaScript代码 #

$(document).ready(function () {
    $('.divUs').hide();
    $(document.body).on('change', '#p_category', function () {
        var selectedValue = $(this).val();
        $('.divUs').toggle(selectedValue === 'Fe_Ence');
    });
});

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