Question

在我的表格中，我有三个动态下拉菜单。第二次下拉是基于或取决于第一次下拉和第三次下拉是基于并取决于第二次下拉。因此，如果我选择第一个下拉列表，它将自动填充这两个下拉列表。

以下是下拉列表中的代码。

<!-- Service Id Field -->
<div class="form-group col-sm-6">
    <label for="service_id">Service:</label>
    <select name="service_id" class="form-control" required id="service_id">
        <option disabled selected>Choose Services</option>
            @foreach ($services as $service)
                <option value="{{ $service->id }}">{{ $service->description }}</option>
            @endforeach
    </select>
</div>

<!-- Categories Id Field -->
<div class="form-group col-sm-6">
    <label for="category_id">Category:</label>
    <select  name="category_id" class="form-control" required id="category_id">
        <option disabled selected>Choose Category</option>
            {{-- @foreach ($categories as $category)
                <option value="{{ $category->id }}">{{ $category->name }}</option>
            @endforeach --}}
    </select>
</div>

<!-- Categories Id Field -->
<div class="form-group col-sm-6">
    <label for="methodology_id">Method:</label>
    <select  name="methodology_id" class="form-control" required id="methodology_id">
        <option disabled selected>Choose Method</option>
            {{-- @foreach ($categories as $category)
                <option value="{{ $category->id }}">{{ $category->name }}</option>
            @endforeach --}}
    </select>
</div>

以下是AJAX脚本：

$(function() {
        $('#service_id').change(function() {

          let url = '{{ url('encoder') }}' + '/service/' + $(this).val() + '/categories/';

          $.get(url, function(data) {
            console.log(data);
            let select = $('form select[name= category_id]');

            select.empty();

            $.each(data, function(key, value) {
              console.log(key + ' ' + value);
              select.append('<option value=' + key + '>' + value + '</option>');
            });
          });

          let url2 = '{{ url('encoder') }}' + '/categories/' + $(this).val() + '/methodologies/';

          $.get(url2, function(data) {
            let select2 = $('form select[name= methodology_id]');

            select2.empty();

            $.each(data, function(key, value) {
              console.log(key + ' ' + value);
              select2.append('<option value=' + key + '>' + value + '</option>');
            });
          });
        });
      });

现在，如果我选择第一个下拉列表，我会获得第二个下拉列表的正确键值对象。然而，在第三次下拉列表中，我得到了错误的对象，因为我认为我将第一个下拉列表的值传递给第二个和第三个下拉对吧？

在这里：

let url2 = '{{ url('encoder') }}' + '/categories/' + $(this).val() + '/methodologies/';

由于$(this).val()我正在传递此函数$('#service_id').change的值吗？但我认为这应该是第二次下拉中关键的价值，这将是第一次下拉的基础。那么如何在这行代码中获取对象的第一个键呢？

$.each(data, function(key, value) {
              console.log(key + ' ' + value);
              select.append('<option value=' + key + '>' + value + '</option>');
            });

所以我可以在第二个网址中传递它而不是：

let url2 = '{{ url('encoder') }}' + '/categories/' + $(this).val() + '/methodologies/';

应该是这样的：

let url2 = '{{ url('encoder') }}' + '/categories/' + // incoming first key of the object from the ajax request base on the first dropdown + '/methodologies/';

对不起的解释感到抱歉。感谢有人可以提供帮助。

Answer 1

最简单的方法：

    $.get(url, function(data) {
        console.log(data);
        let select = $('form select[name= category_id]');

        select.empty();

        $.each(data, function(key, value) {
          console.log(key + ' ' + value);
          select.append('<option value=' + key + '>' + value + '</option>');
        });

          //Either grab the value from the select, or grab the first entry 
          //used in the each section above - use that in URL
          var id = select.val();
          let url2 = '{{ url('encoder') }}' + '/categories/' + id + '/methodologies/';

          $.get(url2, function(data) {
            let select2 = $('form select[name= methodology_id]');

            select2.empty();

            $.each(data, function(key, value) {
              console.log(key + ' ' + value);
              select2.append('<option value=' + key + '>' + value + '</option>');
            });
          });
      });

我将第二个调用移动到第一个调用中，基本上是链接你的依赖项。由于您不知道第一个列表中的IDS列表是什么，因此您必须等待它完成。

如果您想以不同方式对其进行格式化，you can use promises too。

Answer 2

如果第二个AJAX请求取决于第一个请求的数据，则需要在第一个AJAX请求的回调中进行。

如何获取来自AJAX请求的第一个密钥对象

2 个答案: