когда я нажимаю категорию открыть подкатегорию, но когда я щелкаю подкатегорию не открывается, она подкатегория - PullRequest
Новая
       12

когда я нажимаю категорию открыть подкатегорию, но когда я щелкаю подкатегорию не открывается, она подкатегория

0 голосов
/ 07 февраля 2019 

@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' );

Это мой вывод

Проблема в том, что когда я щелкаю по подкатегории открытой категории, но когда я щелкаю по подкатегории, она не открывается, связанная с подкатегорией Это таблица категорий

Это таблица подкатегории

Это две подкатегории таблицы

В чем проблема в ajax, даже если я изменяю переменную html вместо xyz ... Я даю полностью детали.Потому что мой английский очень плохой.Таблица, представление, контроллер, маршрут все определяются, когда я щелкаю по подкатегории открытой категории, но когда я щелкаю по подкатегории, она не открывается, связанная с подкатегорией.

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

Пожалуйста, следуйте этому методу, я надеюсь, что это полезно для вас, если возникнут проблемы, спросите меня снова. 

<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>
0 голосов
/ 07 февраля 2019

Вы используете тег 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>');
});
...