具有多个选项的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>

ajax部分是：

<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，您需要以不同的方式循环它。