子类别不会显示为父类别

Question

我正在尝试根据类别获取我的子类别 这是我的代码

    <div class="form-group">
    <label>Category</label>
    <select id="categoryList" class="form-control" name="category_id" required>
       <?php
  $categories = $this->crud_model->get_categories()->result_array();
  foreach ($categories as $key => $category):?>
            <option value="<?php echo $category['slug']; ?>"><?php echo $category['name']; ?></option>
       <?php endforeach; ?>
    </select>

    <label>Subcategory</label>
    <select id="subcategoryList" class="form-control" name="subcategory_id" required disabled>
      <?php
      $sub_categories = $this->crud_model->get_sub_categories($category['id']);
      foreach ($sub_categories as $sub_category): ?>
    <option id="sub_category-<?php echo $sub_category['id'];?>" name="sub_category"  class="parent-<?php $selected_category_id == $sub_category['id'] ?> subcategory" value="<?php echo $sub_category['slug']; ?>"><?php echo $sub_category['name']; ?></option> 
    <?php  endforeach; ?>
    </select>

jquery

$('#categoryList').on('change', function () {
    $("#subcategoryList").attr('disabled', false); //enable subcategory select
    $("#subcategoryList").val("");
    $(".subcategory").attr('disabled', true); //disable all category option
    $(".subcategory").hide(); //hide all subcategory option
    $(".parent-" + $(this).val()).attr('disabled', false); //enable subcategory of selected category/parent
    $(".parent-" + $(this).val()).show(); 
});

但它只会显示最后一个类别的子类别 我该如何解决这个问题？

或者我之前使用过这段代码

<div class="form-group">
        <label>Category</label>
        <select id="categoryList" class="form-control" name="category_id" required>
           <?php
      $categories = $this->crud_model->get_categories()->result_array();
      foreach ($categories as $key => $category):?>
                <option value="<?php echo $category['slug']; ?>"><?php echo $category['name']; ?></option>
           <?php endforeach; ?>
        </select>

        <label>Subcategory</label>
        <select id="subcategoryList" class="form-control" name="subcategory_id" required disabled>
          <?php
          $sub_categories = $this->crud_model->get_sub_categories($category['id']);
          foreach ($sub_categories as $sub_category): ?>
        <option id="sub_category-<?php echo $sub_category['id'];?>" name="sub_category"  class="parent-<?php $selected_category_id == $sub_category['id'] ?> subcategory" value="<?php echo $sub_category['slug']; ?>"><?php echo $sub_category['name']; ?></option> 
        <?php  endforeach; ?>
        </select>
        
    </div>

jquery

$(function () {
    $("select.dependent").each(function (i, sel) {
        var original = $(this).clone(),
            dependent = $("<select></select>").attr({
                name: this.name
            }).insertAfter(this)
            this.name = "categories_" + this.name

            $("optgroup", this).replaceWith(function () {
                return "<option>" + this.label + "</option>"
            })
            $("option:first",this).prop("selected",true)
            $(this).removeAttr("multiple").on("change", function () {
                var cat = $(this).val()
                dependent.html(original.children("[label='" + cat + "']").html())
            }).change()
            console.log(this)
    })
    
})

但由于我需要 2 为子类别单独选择一个，因此我可以为其放置一个 onchange="filter(this)" 以仅基于子类别显示结果，我已将代码更改为第一部分 所以如果有一种方法可以让我在第二部分中做到这一点，也可以解决我的问题

Answer 1

查看您最初发布的代码，让我们回顾一下它在做什么：

<label>Subcategory</label>
    <select id="subcategoryList" class="form-control" name="subcategory_id" required disabled>
      <?php
      $sub_categories = $this->crud_model->get_sub_categories($category['id']);
      foreach ($sub_categories as $sub_category): ?>
    <option id="sub_category-<?php echo $sub_category['id'];?>" name="sub_category"  class="parent-<?php $selected_category_id == $sub_category['id'] ?> subcategory" value="<?php echo $sub_category['slug']; ?>"><?php echo $sub_category['name']; ?></option> 
    <?php  endforeach; ?>
    </select>

因为 PHP 是在服务器端处理的，并且这里没有其他 AJAX 调用在起作用，所以 $sub_categories = $this->crud_model->get_sub_categories($category['id']); 行只会生成上面块中最后一个类别的子类别。这是您问题的根源，您需要再次遍历类别以获得每个类别的子类别。

我已经更改了您的代码，将两者结合在一起，以显示对foreach 在类别上所做的更改，jQuery.hide() 子类别选择，然后jQuery.show() 仅在选择category 时选择。

<script>
  $('#categoryList').on('change', function () {
    var catId = $(this).val();

    // This will go through each item on the page with class subcategory
    $('.subcategory-group').each(function(key, val) {
      $(val).hide();
      $(val).find('select').attr('disabled', true);
    });

    // Find the correct subcategory using the category id, not make it disabled, set the value to nothing
    $("#subcategory-" + catId).show();
    $("#subcategoryList-" + catId).attr('disabled', false).val("").show();
  });
</script>

<div class="form-group">
  <label for="categoryList">Category</label>
  <select id="categoryList" class="form-control" name="category_id" required>
      <?php
      $categories = $this->crud_model->get_categories()->result_array();
      foreach ($categories as $key => $category):?>
        <option value="<?php echo $category['slug']; ?>"><?php echo $category['name']; ?></option>
      <?php endforeach; ?>
  </select>

  <?php
  // Iterate over the categories again
  foreach($categories as $category):
  ?>
      <div id="subcategory-<?php echo $category['slug']; ?>" class="subcategory-group">
        <!-- Set the label correctly for ADA compliance, showing the name of the category so you can see it working -->
        <label for="subcategoryList-<?php echo $category['slug']?>" class="subcategory-label">Subcategory - <?php echo $category['name']; ?></label>
        <!-- Set the id to something unique using the category id, set a class named subcategory, keep the name so your PHP form can handle it -->
        <select id="subcategoryList-<?php echo $category['slug']?>" class="form-control" name="subcategory_id" required disabled>
          <?php
          // Keeping the code you had which is correct
          $sub_categories = $this->crud_model->get_sub_categories($category['id']);
          foreach ($sub_categories as $sub_category): ?>
            <option id="sub_category-<?php echo $sub_category['id']; ?>" name="sub_category"
                    class="categories custom-select"
                    value="<?php echo $sub_category['slug']; ?>"><?php echo $sub_category['name']; ?></option>
          <?php endforeach; ?>
        </select>
      </div>
  <?php endforeach; ?>
</div>

更改包括再次遍历类别以获取所有子类别，这就是为什么您只有最后一个。

接下来是使用类别 ID 在子类别组中唯一。

在标签上使用适当的 for 属性以符合 ADA 标准。

在<select> 标签上添加一个subcategory 类，以便您最初可以找到（并隐藏）所有标签，然后只显示他们选择的标签。

编辑：更改为使用 $category['slug'] 而不是 $category['id'] 根据原始请求中未列出的规格