Laravel5中实现联动下拉菜单：根据首菜单值填充次菜单

嘿，我来帮你搞定这个动态联动下拉的需求！其实分前端和后端两部分就能实现，一步步来：

你现在第一个下拉的option value是空的，这没法让后端识别选中的公司。得把公司的ID作为value传进去，修改后的代码如下：

<div class="form-group">
    {{Form::label('company', 'Company')}}
    <select class="form-control" id="company" name="company">
        @foreach($company as $key)
            <option value="{{$key->id}}">{{$key->name}}</option> <!-- 这里把value设为公司ID -->
        @endforeach
    </select>
</div>

先把第二个下拉的架子搭好，默认显示提示文本，比如假设第二个是部门（你可以换成自己的业务字段）：

<div class="form-group">
    {{Form::label('department', 'Department')}}
    <select class="form-control" id="department" name="department">
        <option value="">请先选择公司</option>
    </select>
</div>

用jQuery来实现会比较简洁（如果项目没引入jQuery，换成原生JS的fetch API也一样）。在页面底部添加这段脚本：

<script>
$(document).ready(function() {
    // 监听公司下拉的选择变化
    $('#company').on('change', function() {
        const selectedCompanyId = $(this).val();
        const departmentDropdown = $('#department');
        
        // 如果没选公司，重置第二个下拉
        if (!selectedCompanyId) {
            departmentDropdown.html('<option value="">请先选择公司</option>');
            return;
        }
        
        // 发送AJAX请求到后端获取对应数据
        $.ajax({
            url: '/get-related-data', // 这个路由要和后端定义的一致
            type: 'GET',
            data: { company_id: selectedCompanyId },
            success: function(response) {
                // 清空原有选项，添加新数据
                departmentDropdown.empty();
                departmentDropdown.append('<option value="">请选择对应选项</option>');
                $.each(response, function(index, item) {
                    departmentDropdown.append(`<option value="${item.id}">${item.name}</option>`);
                });
            },
            error: function() {
                departmentDropdown.html('<option value="">加载失败，请重试</option>');
            }
        });
    });
});
</script>

首先在routes/web.php里添加一个路由：

Route::get('/get-related-data', [YourController::class, 'getRelatedData']);

然后在对应的控制器里实现getRelatedData方法，根据传过来的公司ID查询关联数据，返回JSON格式：

public function getRelatedData(Request $request)
{
    $companyId = $request->query('company_id');
    // 替换成你自己的模型查询逻辑，比如关联表的where条件
    $relatedData = YourModel::where('company_id', $companyId)->select('id', 'name')->get();
    
    return response()->json($relatedData);
}

• 如果你用原生JS，把AJAX部分换成fetch即可，逻辑完全一致。
• 建议给模型建立关联关系（比如Company模型定义hasMany关联），这样查询代码会更规范。
• 可以在请求过程中给第二个下拉加个“加载中...”的选项，提升用户体验。

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