Laravel Blade下拉框值无法传递到路由问题求助

核心问题 #

你的代码存在两个关键错误：

1. 下拉框不在<form>标签内部，表单提交时不会携带选中的年月值；
2. route()函数是页面加载时生成静态URL，其中的$year和$month是循环遍历后的最后一个值（即1990年12月），和前端下拉框选中的动态值完全无关。

另外还有一个语法错误：range(date('M'), date('12'))无效，date('M')返回月份英文缩写（如Nov），无法和数字12生成正确的月份范围。

方案一：使用查询参数传递（简单直接） #

1. 调整路由定义

不需要在路由路径中硬编码年月，改为接收查询参数：

Route::get('admin/users/{user}/filterbydate', [UserController::class, 'filterByDate'])->name('admin.users.filterbydate');

2. 修改Blade模板

将下拉框移入<form>内部，修正月份生成逻辑：

<div class="col-span-12 box">
    <div class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5">
        <h2 class="text-lg font-medium truncate mr-5">{{ __('messages.download-file') }}</h2>
        <form method="GET" action="{{ route('admin.users.filterbydate', [$user->id])}}">
            <div class="input-form">
                <label>Month</label><span class="ml-1 text-theme-6">*</span>
                <select class="input border w-full mt-2" name="month" required>
                    <option value="">{{ __('messages.select') }}</option>
                    @php
                        // 生成1-12的数字月份，再转换为英文缩写显示
                        $months = range(1, 12);
                    @endphp
                    @foreach ($months as $month)
                        <option value="{{ $month }}">{{ date('M', mktime(0,0,0,$month,1)) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="input-form">
                <label>{{ __('messages.year') }}</label><span class="ml-1 text-theme-6">*</span>
                <select class="input border w-full mt-2" name="year" required>
                    <option value="">{{ __('messages.select') }}</option>
                    @php
                        $years = range(date('Y'), 1990);
                    @endphp
                    @foreach ($years as $year)
                        <option value="{{ $year }}">{{ $year }}</option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="w-8 h-8 sm:w-10 sm:h-10 block bg-theme-1 text-white rounded-full flex-none flex items-center justify-center mr-5">
                <i data-feather="Filter" class="w-4 h-4"></i>
            </button>
        </form>
    </div>
</div>

3. 控制器获取参数

在控制器方法中直接读取查询参数：

public function filterByDate(User $user)
{
    $year = request()->query('year');
    $month = request()->query('month');
    // 后续业务逻辑
}

方案二：动态构建路径参数URL（适配id/year/month路由） #

如果必须使用路径参数的路由结构，需要用JavaScript动态生成提交URL：

1. 路由定义

Route::get('admin/users/{user}/{year}/{month}', [UserController::class, 'filterByDate'])->name('admin.users.filterbydate');

2. 修改Blade模板

添加ID标识下拉框和表单，用JS监听提交事件：

<div class="col-span-12 box">
    <div class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5">
        <h2 class="text-lg font-medium truncate mr-5">{{ __('messages.download-file') }}</h2>
        <div class="input-form">
            <label>Month</label><span class="ml-1 text-theme-6">*</span>
            <select id="month-select" class="input border w-full mt-2" name="month" required>
                <option value="">{{ __('messages.select') }}</option>
                @php
                    $months = range(1, 12);
                @endphp
                @foreach ($months as $month)
                    <option value="{{ $month }}">{{ date('M', mktime(0,0,0,$month,1)) }}</option>
                @endforeach
            </select>
        </div>
        <div class="input-form">
            <label>{{ __('messages.year') }}</label><span class="ml-1 text-theme-6">*</span>
            <select id="year-select" class="input border w-full mt-2" name="year" required>
                <option value="">{{ __('messages.select') }}</option>
                @php
                    $years = range(date('Y'), 1990);
                @endphp
                @foreach ($years as $year)
                    <option value="{{ $year }}">{{ $year }}</option>
                @endforeach
            </select>
        </div>
        <form id="filter-form" method="GET" action="">
            <button type="submit" class="w-8 h-8 sm:w-10 sm:h-10 block bg-theme-1 text-white rounded-full flex-none flex items-center justify-center mr-5">
                <i data-feather="Filter" class="w-4 h-4"></i>
            </button>
        </form>
    </div>
</div>

<script>
document.getElementById('filter-form').addEventListener('submit', function(e) {
    const userId = {{ $user->id }};
    const year = document.getElementById('year-select').value;
    const month = document.getElementById('month-select').value;
    
    // 验证是否选择了年月
    if (!year || !month) {
        e.preventDefault();
        alert('请选择年份和月份');
        return;
    }
    
    // 动态构建路由URL
    this.action = `/admin/users/${userId}/${year}/${month}`;
});
</script>

3. 控制器获取参数

直接接收路径参数：

public function filterByDate(User $user, $year, $month)
{
    // 后续业务逻辑
}

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