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

您正在使用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>');
});

Answer 2

请遵循此方法，希望对您有帮助，如有任何问题，请再次询问我。

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

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

2 个答案: