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

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

Я хочу заполнить третий раскрывающийся список, который называется 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>');
      });
    });
  });
});