Laravel9中如何根据首个select选中值动态显示其他select选项值

现有代码存在两个基础问题，需要先修正：

• 两个select标签重复使用iddefaultSelect，JS无法准确定位元素
• 第二个型号下拉框name属性错误写为marka_id，表单提交时会覆盖品牌字段值

完整实现步骤如下：

修正视图模板 #

调整两个下拉框的id、name属性，加入前端联动逻辑，代码如下：

<div class="mb-3">
    <label for="markaSelect" class="form-label">Marka Seç</label>
    <select id="markaSelect" class="form-select" name="marka_id">
        <option value="">请选择品牌</option>
        @foreach($datamarka as $rs)
            <option value="{{$rs->id}}">{{$rs->name}}</option>
        @endforeach
    </select>
</div>
<div class="mb-3">
    <label for="modelSelect" class="form-label">Model Seç</label>
    <select id="modelSelect" class="form-select" name="model_id">
        <option value="">请先选择品牌</option>
    </select>
</div>

<script>
// 品牌下拉框选中项变化时触发
$('#markaSelect').change(function() {
    const markaId = $(this).val();
    const modelDom = $('#modelSelect');
    modelDom.empty().append('<option value="">加载中...</option>');

    if (!markaId) {
        modelDom.empty().append('<option value="">请先选择品牌</option>');
        return;
    }

    // 请求对应品牌的型号数据
    $.get(`/get-models-by-marka/${markaId}`, function(res) {
        modelDom.empty().append('<option value="">请选择型号</option>');
        res.data.forEach(item => {
            modelDom.append(`<option value="${item.id}">${item.name}</option>`);
        });
    });
});
</script>

如果项目没有引入jQuery，把上述JS逻辑替换为原生JS的change监听+fetch请求即可，核心逻辑一致。

新增路由 #

在routes/web.php中新增接口路由，后台接口记得放到对应鉴权中间件组中：

use App\Http\Controllers\Admin\SeriController;

Route::get('/get-models-by-marka/{marka_id}', [SeriController::class, 'getModelsByMarka']);

新增控制器方法 #

原有create方法无需修改，在SeriController中新增型号查询方法即可：

/**
 * 根据品牌ID查询对应型号列表
 */
public function getModelsByMarka($marka_id)
{
    // 此处假设型号表MModel中关联品牌的字段为marka_id，可根据实际表结构调整
    $modelList = MModel::where('marka_id', $marka_id)
        ->get(['id', 'name']);
    
    return response()->json([
        'code' => 0,
        'data' => $modelList
    ]);
}

注意事项 #

• 型号表和品牌表的关联字段请根据自己的实际数据库结构调整，示例默认用marka_id作为关联外键
• 同域后台项目无需额外处理跨域，如果是前后端分离部署，记得给接口加跨域支持
• 可自行加表单提交校验，未选择型号时阻止提交，避免空值入库

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