отображать результат из базы данных на основе установленного флажка

Question

Я показываю категорию первым в списке флажков. Когда я отмечаю флажок категории, он отображает связанные подкатегории в следующем списке флажков. Я получаю результат для первого установленного флажка, но при установке второго флажка предыдущий результат теряется. Мне нужно решение для отображения всех отмеченных результатов флажка.

Я хочу отобразить подкатегорию на флажок первого списка. jQuery возвращает только текущее значение флажка, только список зависимых флажков. Мне нужно решение для отображения всех отмеченных флажков результатов. Контроллер показывает функцию, связанную с получением категории и подкатегории. Код файла Blade содержит все результаты выборки. Пожалуйста, исправьте мой код.

category = { category_id, name };
sub_category = { sub_category_id, category_id, sub_category_name };

public function getCategory() 
{
  $category_list = DB::select('select * from table_category');
  return view('insertbusiness',['category_list' => $category_list]);
}

public function getSubCategory(Request $request)
{
  $sub_category = DB::table("table_sub_category")
    ->where("category_id",$request->category)
    ->pluck("sub_category_name","sub_category_id");
  return response()->json($sub_category );
}

  <div class="col-sm-4">
    @foreach($category_list as $category)
      <div class="form-check form-check-inline">
        <input class="form-check-input category" type="checkbox" id="category" name="category[]" value="{{$category->category_id}}">
        <label class="form-check-label" for="category">{{$category->category}}</label>
      </div>
    @endforeach
  </div>
</div>
<div class="row">
  <div class="col-sm-6">
    <label for="subcategory" class="">Sub-Category</label>
    <div class="sub_category" id="sub_category"></div>
  </div>

$(function () {
  $('.category').click(function() {
    if (this.checked) {
      var id = $(this).attr('value');
      if (id) {
        $.ajax({
          type:"GET",
          url: "{{url('getSubCategory')}}?category=" + id,
          success: function(res) {
            if (res) {
              $("#sub_category").empty();                
              $.each(res, function(key, value) {
                $("#sub_category").append('<input type="checkbox" value="' + key + '">' + value + '');
              });
            } else {
              $("sub_category").empty();
            }
          }
        });
      } else {
        $("#sub_category").empty();
        $("#category").empty();
      }  
    }    
  });
});

Answer 1

Это может быть полезно для достижения ваших требований. Приведенные ниже данные необходимо изменить, чтобы отобразить список подкатегорий всех отмеченных флажков категории:

• Избегайте использования подкатегории empty () в ответе AJAX
• Добавьте класс уникального идентификатора (например, sub_category_of_ *), чтобы идентифицировать список подкатегорий категории
• Удалить список подкатегорий, когда снята отметка с уже отмеченной категории

Замените JS на приведенный ниже код и попробуйте.

$(function () {
  $('.category').click(function() {
    var id = $(this).attr('value');
    if (this.checked) {
      if (id) {
        $.ajax({
          type:"GET",
          url: "{{url('getSubCategory')}}?category=" + id,
          success: function(res) {
            if (res) {
              $.each(res, function(key, value) {
                $("#sub_category").append('<input type="checkbox" value="' + key + '" class="sub_category_of_'+id+'">' + value + '');
              });
            } else {
              // Handle the error case here without removing an existing elements
            }
          }
        });
      } else {
         // Handle the error case here
      }
    }
    else
    {
      // Remove the unchecked category checkbox if available
      if (id && $('.sub_category_of_'+id).length) {
        $('.sub_category_of_'+id).remove();
      }
    }
  });
});