Laravel结合jQuery实现关联下拉筛选的技术求助

一、确认后端API接口 #

假设你已完成模型关联（AcademicOption属于AcademicFormation），需补充路由与控制器方法来返回对应选项：

1. 添加路由 #

在routes/web.php中添加：

Route::get('/academic-options/{formation}', [AcademicOptionController::class, 'getByFormation']);

2. 实现控制器方法 #

在AcademicOptionController中新增方法：

public function getByFormation(AcademicFormation $formation)
{
    // 通过模型关联获取对应选项，仅返回需要的字段
    $options = $formation->academicOptions()->select('id', 'name')->get();
    return response()->json($options);
}

二、前端视图（create.blade.php）实现 #

1. 渲染关联下拉框 #

<div class="form-group">
    <label for="academic_formation_id">Academic Formation</label>
    <select id="academic_formation_id" name="academic_formation_id" class="form-control">
        <option value="">请选择...</option>
        @foreach($academicFormations as $formation)
            <option value="{{ $formation->id }}">{{ $formation->name }}</option>
        @endforeach
    </select>
</div>

<div class="form-group">
    <label for="academic_option_id">Academic Option</label>
    <select id="academic_option_id" name="academic_option_id" class="form-control">
        <option value="">请先选择Academic Formation...</option>
    </select>
</div>

注：需在控制器create方法中传递$academicFormations = AcademicFormation::all();到视图。

2. 编写jQuery筛选逻辑 #

在视图底部或单独JS文件中添加：

$(document).ready(function() {
    // 监听AcademicFormation下拉框的切换事件
    $('#academic_formation_id').on('change', function() {
        const formationId = $(this).val();
        const optionSelect = $('#academic_option_id');

        // 未选择时重置第二个下拉框
        if (!formationId) {
            optionSelect.html('<option value="">请先选择Academic Formation...</option>');
            return;
        }

        // 发送AJAX请求获取对应选项
        $.ajax({
            url: `/academic-options/${formationId}`,
            type: 'GET',
            success: function(data) {
                optionSelect.empty();
                optionSelect.append('<option value="">请选择...</option>');
                // 循环渲染新选项
                $.each(data, function(index, option) {
                    optionSelect.append(`<option value="${option.id}">${option.name}</option>`);
                });
            },
            error: function() {
                optionSelect.html('<option value="">加载失败，请重试</option>');
            }
        });
    });
});

三、关键注意事项 #

• 确保页面头部包含CSRF令牌meta标签，避免请求被拦截：

  <meta name="csrf-token" content="{{ csrf_token() }}">
  

• 模型关联需正确定义：
  • AcademicOption模型：

    public function academicFormation()
    {
        return $this->belongsTo(AcademicFormation::class);
    }
    

  • AcademicFormation模型：

    public function academicOptions()
    {
        return $this->hasMany(AcademicOption::class);
    }
    

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