如何在Blade中获取下拉选择框选中值并传入路由参数？

问题分析 #

你之前尝试直接在Blade模板中用route()函数传递前端下拉框的选中值，这种方法行不通——因为Blade的模板渲染是在后端完成的，此时前端的选中值还未产生，后端无法获取到这个动态数据。

解决方案：使用JavaScript动态修改链接地址 #

通过监听下拉框的选择事件，实时获取选中值并生成正确的路由URL，替换按钮的href属性即可。

步骤1：修改HTML元素，添加ID方便获取

<div class="flex justify-center mt-5">
    <div class="form-control">
        <div class="input-group">
            <select class="select select-bordered" name="search" id="searchSelect">
                <option disabled selected>Select</option>
                <option>Visits</option>
                <option>Visitors</option>
            </select>
            <a class="btn" href="" id="searchBtn">Search</a>        
        </div>
    </div>
</div>

步骤2：添加JavaScript代码处理动态路由

// 获取下拉框和按钮元素
const searchSelect = document.getElementById('searchSelect');
const searchBtn = document.getElementById('searchBtn');

// 监听下拉框选择变化事件
searchSelect.addEventListener('change', function() {
    const selectedValue = this.value;
    if (selectedValue) {
        // 先用Blade生成带占位符的路由地址，再替换为选中值
        const baseRoute = "{{ route('search_resource', ['search' => 'placeholder']) }}";
        const finalUrl = baseRoute.replace('placeholder', encodeURIComponent(selectedValue));
        searchBtn.href = finalUrl;
    } else {
        // 未选中时清空链接
        searchBtn.href = '';
    }
});

替代方案：使用表单提交（无需JS） #

如果你不想用JavaScript，可以将结构改为表单，通过GET提交的方式传递参数，同时调整路由适配查询参数：

<form class="flex justify-center mt-5" method="GET">
    <div class="form-control">
        <div class="input-group">
            <select class="select select-bordered" name="search" required>
                <option disabled selected>Select</option>
                <option>Visits</option>
                <option>Visitors</option>
            </select>
            <button class="btn" type="submit">Search</button>        
        </div>
    </div>
</form>

对应的路由调整为接受查询参数：

Route::get('/search', [SearchController::class, 'show_resource'])
    ->middleware('auth')
    ->name('search_resource');

然后在SearchController的show_resource方法中获取参数：

public function show_resource(Request $request)
{
    $searchValue = $request->query('search');
    // 后续逻辑处理...
}

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