当我单击类别时打开子类别但是当我单击子类别时未打开它的子​​类别

Question

@extends('layouts.app')

@section('content')
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>   
  
<div class="form-group col-md-8">
  <button type="button" class="form-control" data-toggle="modal" data-target="#myModal">
Category  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
<div class="modal-dialog modal-lg" >
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <a type="button" class="close" data-dismiss="modal">&times;</a>
        </div>
<div class="modal-body">
  <div class="row">
      <table class="table table-striped">
          <thead>
          </thead>
          <tbody class="table">
              <tr>
                  <td style="background-color: green">
                   <div class="col-md-4" >
                    {{-- <a href="#" name="category" id="category" >             --}}
                        @foreach($categories as $category)
                        <option  class="categoryList" value="{{$category->id}}">{{$category->category}}</option>
                        @endforeach
                        {{-- </a> --}}
                    </div>
                  </td>
                     <td>
                        <div class="col-md-4 ">
                        <a href="#" name="subcategory" id="subcategory" class="subcategoryList"> </a>
                        </div>
                     </td>
                     <td>
                       <div class="col-md-4">
                        <a href="#" name="subcategorytwo" id="subcategorytwo" ></a>
                        </div>
                     </td>     
              </tr>
          </tbody>
      </table>
        
  </div>
</div>
      </div>
    </div>
  </div>

</div>
<script type="text/javascript">

    $(function(){
        $('.categoryList').on('click', function(){
          //alert('hi');
          var cat_id = $(this).attr('value');
          console.log(cat_id);
          var url = "/api/getSubcategory/"+cat_id;
          $.ajax({
              type: "GET",
              url: url,
              dataType: "JSON",
              success: function(res)
              {
                // amusing res = {"3":"home","4":"home duplex"}; 
                var html = "";
                $.each(res, function (key, value) {
                     html += "<option value="+key+">"+value+"</option>";
                });
                $("#subcategory").html(html);
              }
          });
        });

    });

  $(function(){
        $('.subcategoryList').on('click', function(){
          //alert('hi');
          var subcat_id = $(this).attr('value');
          console.log(cat_id);
          var url = "/api/getSubcategorytwo/"+subcat_id;
          $.ajax({
              type: "GET",
              url: url,
              dataType: "JSON",
              success: function(res)
              {
                
                var xxyz = "";
                $.each(res, function (key, value) {
                     xyz += "<option value="+key+">"+value+"</option>";
                });
                $("#subcategorytwo").xyz(xyz);
              }
          });
        });

    });
</script>
@endsection

这是我的 API

 public function getSubcategory($id){
    $subcategories = Subcategory::where('category_id',$id)->select('subcategory','id')->pluck('subcategory', 'id');
    return json_encode($subcategories);
  }
   public function getSubcategorytwo($id){
    $subcategorytwos = Subcategorytwo::where('subcategory_id',$id)->select('subcategorytwo','id')->pluck('subcategorytwo', 'id');
    return json_encode($subcategorytwos);
  }

这是 API 路由

 Route::get('api/getSubcategory/{id}', 'PostController@getSubcategory' );
    Route::get('api/getSubcategorytwo/{id}', 'PostController@getSubcategorytwo' );

This is my output

问题是当我单击类别打开子类别但当我单击子类别时未打开与子类别相关的他 This is category table

This is subcategory table

This is subcategorytwo table

ajax有什么问题，即使我改变变量html替换xyz.. 我正在提供完整的细节。因为我的英语很差。 表、视图、控制器、路由都已定义，当我单击类别打开子类别时，但当我单击子类别时，它并没有打开与子类别相关的。

Answer 1

请按照这个方法，希望对你有帮助，如果有问题再问我。

<select name="category" id="category">
@foreach($categories as $category)
<option value="{{$category->id}}">{{$category->name}}</option>
@endforeach
</select>
<select name="subcat" id="subcat">
</select>
<select name="subsubcat" id="subsubcat">
</select>
<script>
$("#category").on('change',function(){
    var id=$(this).val();
   $.ajax({
      type: 'get',
      url: 'getsubcat/'+id,
      success:function(data){
      $.each(data, function(key,value){   
       $('#subcat')
      .append($("<option></option>")
      .attr("value",value.id)
      .text(value.subcatname)); 
     })
 }
  })

  });
$("#subcat").on('change',function(){
    var id=$(this).val();
   $.ajax({
      type: 'get',
      url: 'getsubcat2/'+id,
      success:function(data){
      $.each(data, function(key,value){   
       $('#subsubcat')
      .append($("<option></option>")
      .attr("value",value.id)
      .text(value.subsubcatname)); 
     })
 }
  })

  });
</script>

Answer 2

您正在使用a 标签来选择选项。请使用select标签，如下所示

<select name="category" id="category" class="form-control input-sm">
    @foreach($categories as $category)
         <option  class="categoryList" value="{{$category->id}}"> 
              {{$category->category}}
         </option>
    @endforeach
</select>

对于子类别：

<select name="subcategory" id="subcategory" class="form-control input-sm">
    <option value=""></option>
</select>

通过 JS 附加子类别。然后选择子类别并创建另一个select 并附加到那里。

<select name="subcategorytwo" id="subcategorytwo" class="form-control input-sm">
    <option value=""></option>
</select>

如何将类别附加到select

let subcat =  $('#subcategory').empty();
$.each(data,function(create,subcatObj){
    let option = $('<option/>', {id:create, value:subcatObj});
    subcat.append('<option value="'+subcatObj+'">'+subcatObj+'</option>');
});