基于前两个动态下拉框实现AJAX自动填充第三个下拉框（Laravel5.5）

没问题，我来帮你搞定Laravel 5.5里的三级联动下拉框！咱们分步骤来实现，确保逻辑清晰又好用：

先把你现有的Service下拉框补全，再添加Category和Methodology的下拉框，最后加上AJAX交互脚本：

<!-- Service Id Field -->
<div class="form-group col-sm-6">
    <label for="service_id">Service:</label>
    <select name="service_id" id="service_id" class="form-control">
        <option value="">请选择服务</option>
        @foreach($services as $service)
            <option value="{{ $service->id }}">{{ $service->name }}</option>
        @endforeach
    </select>
</div>

<!-- Category Id Field -->
<div class="form-group col-sm-6">
    <label for="category_id">Category:</label>
    <select name="category_id" id="category_id" class="form-control">
        <option value="">请先选择服务</option>
    </select>
</div>

<!-- Methodology Id Field -->
<div class="form-group col-sm-6">
    <label for="methodology_id">Methodology:</label>
    <select name="methodology_id" id="methodology_id" class="form-control">
        <option value="">请先选择分类</option>
    </select>
</div>

<!-- AJAX交互脚本 -->
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script>
    $(document).ready(function() {
        // 监听Service下拉框变化
        $('#service_id').on('change', function() {
            const serviceId = $(this).val();
            if (serviceId) {
                // 发送AJAX请求获取对应分类
                $.ajax({
                    url: '/get-categories/' + serviceId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        // 重置分类下拉框
                        $('#category_id').empty().append('<option value="">请选择分类</option>');
                        // 填充分类选项
                        $.each(data, function(key, value) {
                            $('#category_id').append(`<option value="${key}">${value}</option>`);
                        });
                        // 清空方法下拉框
                        $('#methodology_id').empty().append('<option value="">请先选择分类</option>');
                    }
                });
            } else {
                // 未选择服务时重置两个下拉框
                $('#category_id').empty().append('<option value="">请先选择服务</option>');
                $('#methodology_id').empty().append('<option value="">请先选择分类</option>');
            }
        });

        // 监听Category下拉框变化
        $('#category_id').on('change', function() {
            const categoryId = $(this).val();
            if (categoryId) {
                // 发送AJAX请求获取对应方法
                $.ajax({
                    url: '/get-methodologies/' + categoryId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        // 重置并填充方法下拉框
                        $('#methodology_id').empty().append('<option value="">请选择方法</option>');
                        $.each(data, function(key, value) {
                            $('#methodology_id').append(`<option value="${key}">${value}</option>`);
                        });
                    }
                });
            } else {
                // 未选择分类时重置方法下拉框
                $('#methodology_id').empty().append('<option value="">请先选择分类</option>');
            }
        });
    });
</script>

添加两个GET路由，用于处理AJAX请求：

// 根据服务ID获取分类
Route::get('/get-categories/{serviceId}', 'FormController@getCategories');

// 根据分类ID获取方法
Route::get('/get-methodologies/{categoryId}', 'FormController@getMethodologies');

记得把FormController替换成你实际使用的控制器名称。

在对应控制器里添加两个方法，从数据库查询数据并返回JSON格式：

use App\Service;
use App\Category;
use App\Methodology;

// ...

// 获取指定服务下的分类
public function getCategories($serviceId)
{
    // 假设Category模型有service_id外键关联Service
    $categories = Category::where('service_id', $serviceId)->pluck('name', 'id');
    return response()->json($categories);
}

// 获取指定分类下的方法
public function getMethodologies($categoryId)
{
    // 假设Methodology模型有category_id外键关联Category
    $methodologies = Methodology::where('category_id', $categoryId)->pluck('name', 'id');
    return response()->json($methodologies);
}

在创建页面的控制器方法中，把所有服务数据传递给视图：

public function create()
{
    $services = Service::all();
    return view('your-view.create', compact('services'));
}

替换your-view为你实际的视图路径（比如projects.create）。

• 确保你的模型间关联关系正确设置（比如Service模型有hasMany(Category::class)，Category模型有hasMany(Methodology::class)），即使没设置关联，上面的where查询也能正常工作。
• 如果项目没引入jQuery，可以用Laravel自带的Axios替代，逻辑是一样的，只是语法稍有不同。
• 测试时可以打开浏览器开发者工具，查看AJAX请求的状态和返回数据，方便排查问题。

这样一套流程下来，三级联动的下拉框就能正常工作了——选择服务后分类自动加载，选择分类后方法自动更新。

内容的提问来源于stack exchange，提问作者Jaaayz