John Davidson

Message:

I am trying to get my subcategory based on the category
here is my code

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

the 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(); 

});

but it will only show the last category's subcategories
how can I fix this?

alternatively i was using this code before

<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)

    })

    

})

but since I need 2 selects one individually for sub-categories that I can put an onchange="filter(this)" for it that show the result only based on the subcategory I've changed my code to first part
so if there is a way that I can do that in the second part that can fix my problem too

---

My Answer:
To fix the issue in your first code snippet, you need to make sure that you are getting the subcategories for the selected category in the jQuery change event handler. Currently, you are only getting the subcategories for the last category in the loop.

You can modify your jQuery code as follows:

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

// Get subcategories for the selected category
$.ajax({
url: 'get_subcategories.php',
type: 'POST',
data: { category: selectedCategory },
success: function(response) {
$("#subcategoryList").html(response);
}
});
});


In this code snippet, you need to create a PHP file (e.g., get_subcategories.php) that will handle the AJAX request and return the subcategories for the selected category. You can modify the PHP code to fetch subcategories based on the selected category.

Additionally, you can also use the second code snippet you provided and modify it to handle the subcategories based on the selected category. You can add an `onchange` event to the subcategory select element and filter the results accordingly.

I hope this helps! Let me know if you have any further questions.