Laravel выпадающий AJAX с несколькими вариантами

Question

У меня есть проблема в течение долгого времени, и я еще не нашел решение. У меня есть 4 таблицы компаний, продуктов, событий и групп, каждая из которых имеет свои категории. Я создаю мульти форму поиска, которая имеет 2 раскрывающихся списка и текстовое поле поиска. В первом раскрывающемся списке имеется разное значение параметра для каждой таблицы для поиска по 4 различным таблицам, и я хочу, чтобы каждый параметр / таблица выбиралась и отображалась в параметрах / категориях для второго раскрывающегося списка. Я не могу понять ajax на данный момент, и я хочу, чтобы кто-то помог.

Моя форма:

<form action="{{route('searchresults')}}" method="post">
      {{ csrf_field() }}
      <div class="form-group">
        <div class="col-xs-3" style="padding-left:0px !important;padding-right:0px !important;">
          <select class="form-control input-lg" id="country" name="type">
            <option value="">-Type-</option>
            <option value="companies">-{{__('header.companies')}}-</option>
            <option value="products">-{{__('header.products')}}-</option>
            <option value="groups">-{{__('header.groups')}}-</option>
            <option value="events">-{{__('header.events')}}-</option>
          </select>
        </div>
        <div class="col-xs-3" style="padding-left:0px !important;padding-right:0px !important;">
          <select class="form-control input-lg" id="category" name="category">
            <option value="">-Category-</option>          </select>
        </div>
        <div class="col-xs-4" style="padding-left:0px !important;padding-right:0px !important;">
          <input type="text" name="query" class="form-control input-lg" id="" placeholder="Search what are you looking for"
            required>
        </div>
        <div class="col-xs-2" style="padding:0px 0px !important">
          <button type="submit" class="btn btn-default btn-block input-lg">
            <span class="text-center"><i class="fa fa-2x fa-search"></i></span>
          </button>
        </div>
      </div>
    </form>

Аяксная часть:

<script type="text/javascript">
   $(document).ready(function(){
     $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  });
     $('#type').change(function(){
       var type = $('#type').val();
       console.log(type);
       $.ajax({
         url: "{{route('dependent')}}",
         method: 'post',
         data:'',
       });
     });
   });

Answer 1

Вы можете заполнить раскрывающийся список категорий следующим образом -

$.ajax({
     url: "{{route('dependent')}}",
     method: 'post',
     data:{'type': type},
     success : function(data) {              
                $.each(data, function(key, value) {   
                   $('#category')
                      .append($("<option></option>")
                         .attr("value",key)
                         .text(value)); 
               });
            }
   });

В зависимости от вашего data, вам нужно его зациклить по-разному.