子类别将不会显示为父类别

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＝"0"设置为"0"；过滤器(这个("；对于仅基于子类别显示结果的代码，我已将代码更改为第一部分因此，如果有一种方法可以在第二部分中做到这一点，也可以解决我的问题

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()以及选择category时仅选定的jQuery.show()进行了哪些更改。

<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']