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

我使用的是Laravel5.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>

服务：
选择服务
@foreach（$services as$service）
{{$service->description}
@endforeach
类别：
选择类别
{{--@foreach（$categories作为$category）
{{$category->name}
@endforeach--}
{！！Form:：label（'methodology_id'，'Method:'）
{！！Form:：select（'methodology_id'，$methodologys，null，['class'=>'Form control'，'required']）

在我的剧本里

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

$（函数（）{
$（'#服务_id'）。更改（函数（）{
让url='{url（'encoder'）}}+'/service/'+$（this.val（）+'/categories/'）；
$.get（url、函数（数据）{
控制台日志（数据）；
让select=$（'formselect[name=category_id]'）；
select.empty（）；
$。每个（数据、函数（键、值）{
console.log（键+“”+值）；
select.append（“”+value+“”）；
});
});
});
});
//方法的动态属性下拉列表
$（函数（）{
$（'select[name=category_id]'）。更改（函数（）{
设url2='{url（'encoder'）}}+'/categories/'+$（this.val（）+'/methodologys/'）；
$.get（url2，函数（数据）{
让select2=$（'formselect[name=methodology\u id]'）；
选择2.empty（）；
$。每个（数据、函数（键、值）{
console.log（键+“”+值）；
选择2.追加（“”+值+“”）；
});
});
});
});

我在我的ajax中创建了两个函数，如果第一个下拉菜单发生更改，它们将被删除。将根据所选数据的第一个下拉列表填充第二个下拉列表。然而，所有这些都很好地发挥了作用。在填充第三个下拉列表之前，我仍然需要在第二个下拉列表中进行选择

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

如果有人能帮忙，我将不胜感激。

---

提前感谢。

我不能100%确定我是否正确回答了您的问题，但您希望更改选择2和选择3以根据第一次选择进行更改

在第二个函数上，您正在观看第二个select for changes

$（'select[name=category_id]'）。change（function（）{

将选择器更改为

$（'#service_id'）。change（function（）{

如果您更改第一个select，它应该会更新

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

$（函数（）{
$（'#服务_id'）。更改（函数（）{
让url='{url（'encoder'）}}+'/service/'+$（this.val（）+'/categories/'）；
$.get（url、函数（数据）{
控制台日志（数据）；
让select=$（'formselect[name=category_id]'）；
select.empty（）；
$。每个（数据、函数（键、值）{
console.log（键+“”+值）；
select.append（“”+value+“”）；
});
});
设url2='{url（'encoder'）}}+'/categories/'+$（this.val（）+'/methodologys/'）；
$.get（url2，函数（数据）{
让select2=$（'formselect[name=methodology\u id]'）；
选择2.empty（）；
$。每个（数据、函数（键、值）{
console.log（键+“”+值）；
选择2.追加（“”+值+“”）；
});
});
});
})；

您的select3是根据select2中的选定值填充的。当您的select1被选中时，它会填充select2，而select2中没有选定值，因此在您在select2中进行选择之前，select3不会被填充。如果您想根据select1中的选择填充select3，您可以需要定义一个与

服务

和

方法论

的关系，并为其创建一个路由。或者在select1更改事件上选择一个默认值，并在第一个函数上触发select2的更改事件。现在它正在工作。但我正在传递第一个下拉值的id。我应该传递我需要传递的第二个下拉值这是获取第三个下拉列表键值的类别id。我的错误。我得到了正确的值。感谢您的帮助！非常感谢！现在它可以工作了！：）您好@Daniel。很抱歉不方便，但是我在第一个下拉列表中得到了id的值，它应该是要在第二个下拉列表中填充的第一个选项的id。因为一个方法属于一个类别。对不起，我认为这是因为它传递了

let url2='{url（'encoder'）}}+'/categories/'+$（this）.val（）+'/methodologys/'；

但是它应该是需要在url2中传递的第二个下拉列表的键。然后你可以使用

让url2='{{url（'encoder'）}}'+'/categories/'+$（category_id）.val（）+'/methodologys/'；

。

$（categority_id）.val（）

将给你类别的id。很抱歉，这是我的错。