laravel dropdown ajax with multiple options

Question

i have an issue for a long time and i have not found the solution yet. I have 4 tables which are companies, products, events and groups, each of those has categories. I'm creating a multi search form which has 2 drop-downs and a search text field. the first dropdown has different option value for each table to search to the 4 different tables and i want for each option/table to select and display in the options/categories to the second dropdown. I cannot understand ajax at this point and i want someones help.

My form is:

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

The ajax part is:

<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

You can populate the category dropdown like this -

$.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)); 
               });
            }
   });

Depending on your data , you need to loop it differently.