AJAX 从第一个和第二个动态下拉列表自动填充下拉列表

Question

我使用的是 Laravel 5.5，并且有 3 个动态下拉菜单。我的第一个下拉菜单是服务。服务有很多类别，类别是第二个下拉列表。一个类别属于一个服务。现在这些类别有很多方法，这是第三个下拉列表。方法属于类别。

这就是我到目前为止所做的。

create.blade.php

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

<!-- Methodologies Id Field -->
<div class="form-group col-sm-6">
    {!! Form::label('methodology_id', 'Method:') !!}
     {!! Form::select('methodology_id', $methodologies, null, ['class' => 'form-control','required'])!!}
</div>

在我的脚本中

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

    // Dynamic property dropdown for methodologies
    $(function() {
        $('select[name=category_id]').change(function() {

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

我在我的 ajax 中创建了 2 个函数，如果第一个下拉菜单发生变化。第二个下拉列表将根据所选数据的第一个下拉列表填充。但是，所有这些都运行良好。在第三个下拉列表被填充之前，我仍然需要在第二个下拉列表中进行选择。

我想填充第三个下拉列表，methodologies_id 取决于第一个下拉列表填充的第一个选项。

如果有人可以提供帮助，我们将不胜感激。 提前致谢。

Answer 1

我不是 100% 确定我的问题是否正确，但您想更改选择 2 并选择 3 以根据第一个选择进行更改。

在您的第二个功能上，您正在观看第二个选择以进行更改 $('select[name=category_id]').change(function() { 将选择器更改为 $('#service_id').change(function() {，如果您更改第一个选择，它应该会更新。

您也可以将这两个函数重构为一个。

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