Laravel 5 + AJAX实现依赖前置下拉框的动态选择菜单

明白啦，你要做的是联动下拉选择菜单——选完第一个下拉框（公司）后，第二个下拉的选项自动跟着更新对吧？我结合你给的Laravel Blade代码片段，一步步帮你实现：

先把你现有代码里的小问题调整下，比如name="university"明显是笔误，应该改成name="company_id"；另外option要把公司ID作为value（方便传给后端），同时显示公司名称给用户看：

<div class="form-group">
    {{Form::label('company', 'Company')}}
    <select class="form-control" id="company" name="company_id">
        <option disabled selected value> -- select an option -- </option>
        @foreach($company as $key)
            <option value="{{ $key->Id }}">{{ $key->name }}</option> {{-- 这里假设公司模型有name字段，可根据实际修改 --}}
        @endforeach
    </select>
</div>

<!-- 第二个下拉框先留空，等待动态填充 -->
<div class="form-group">
    {{Form::label('related_item', 'Related Item')}} {{-- 改成你实际需要的字段名，比如Department/Team等 --}}
    <select class="form-control" id="related_item" name="related_item_id">
        <option disabled selected value> -- select a company first -- </option>
    </select>
</div>

在Laravel里新增一个路由，用来接收选中的公司ID，返回对应的关联数据（比如部门、团队等）：

// 可以放在routes/web.php或者routes/api.php
Route::get('/get-related-items/{companyId}', 'CompanyController@getRelatedItems');

然后在CompanyController里实现对应的方法，从数据库获取关联数据并返回JSON格式：

public function getRelatedItems($companyId)
{
    // 这里假设你的关联模型是RelatedItem，外键是company_id，可根据实际修改
    $relatedItems = RelatedItem::where('company_id', $companyId)->get();
    
    return response()->json($relatedItems);
}

用jQuery监听第一个下拉框的change事件，发送AJAX请求获取数据后，动态更新第二个下拉框的选项：

// 可以放在Blade模板的底部，或者单独的JS文件中
$(document).ready(function() {
    $('#company').on('change', function() {
        const companyId = $(this).val();
        
        if (companyId) {
            // 发送AJAX请求到后端接口
            $.ajax({
                url: `/get-related-items/${companyId}`,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    // 清空第二个下拉框现有选项
                    $('#related_item').empty();
                    // 添加默认提示选项
                    $('#related_item').append('<option disabled selected value> -- select an item -- </option>');
                    // 循环添加新选项
                    $.each(data, function(key, item) {
                        $('#related_item').append(`<option value="${item.id}">${item.name}</option>`);
                    });
                },
                error: function() {
                    // 请求失败时的处理
                    $('#related_item').empty();
                    $('#related_item').append('<option disabled selected value> Failed to load items </option>');
                }
            });
        } else {
            // 未选择公司时，重置第二个下拉框
            $('#related_item').empty();
            $('#related_item').append('<option disabled selected value> -- select a company first -- </option>');
        }
    });
});

• 如果你不用jQuery，也可以用原生JS的fetch API实现，逻辑完全一致
• 确保你的模型关联关系正确（比如Company模型和RelatedItem模型有hasMany关联）
• 记得在模板中引入jQuery（如果用上面的JS代码），比如在页面底部添加：<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
• 所有字段名（比如name、id、模型名）都可以根据你的实际数据库结构修改

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