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() {，如果您更改了第一个选择，则会更新。

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

＆＃13;

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

＆＃13;

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

1 个答案: