子类别不会显示为父类别

subcategory will not show as parent category

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

    <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)" 来仅基于子类别显示结果,我已将代码更改为第一部分 所以如果有一种方法可以在第二部分中解决我的问题

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

<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 class 以便您最初可以找到(并隐藏)所有标签,然后仅显示他们选择的标签。

编辑:根据原始请求

中未列出的规格更改为使用$category['slug']而不是$category['id']