Laravel实现下拉框切换展示对应状态的注册数据表数据

我来帮你一步步搞定这个Laravel筛选功能，从前端到后端的实现都给你梳理明白：

1. 完善前端下拉框的JavaScript逻辑 #

你已经有了代码开头，我帮你补全两种实现方式——无刷新的AJAX版本（体验更好）和简单的表单提交版本，按需选择：

AJAX无刷新版本 #

$(function () {
    $("#dropselect").change(function () {
        let selectedValue = $(this).val();
        // 把下拉框选项映射到对应的question_schedul状态值
        let schedulStatus = selectedValue === "24Hours" ? 1 : 2;
        
        // 发起AJAX请求获取筛选后的数据
        $.ajax({
            url: "{{ route('registrations.filter') }}",
            type: "GET",
            data: { status: schedulStatus },
            success: function(response) {
                // 假设你用id为registrationList的容器展示数据列表
                $("#registrationList").html(response);
            },
            error: function(xhr) {
                console.error('请求出错啦:', xhr);
            }
        });
    });
});

简单表单提交版本（适合不需要无刷新的场景） #

先给下拉框套个表单：

<form action="{{ route('registrations.index') }}" method="GET">
    <select id="dropselect" name="status">
        <option value="1" {{ request('status') == 1 ? 'selected' : '' }}>24小时</option>
        <option value="2" {{ request('status') == 2 ? 'selected' : '' }}>15天</option>
    </select>
</form>

然后JS只需要触发表单提交：

$(function () {
    $("#dropselect").change(function () {
        $(this).closest('form').submit();
    });
});

2. 定义路由 #

在routes/web.php里添加对应的路由，分别处理页面加载和AJAX筛选请求：

use App\Http\Controllers\RegistrationController;

// 主页面路由，支持接收筛选参数
Route::get('/registrations', [RegistrationController::class, 'index'])->name('registrations.index');
// AJAX筛选专用路由，返回数据列表的部分视图
Route::get('/registrations/filter', [RegistrationController::class, 'filter'])->name('registrations.filter');

3. 控制器逻辑（推荐用Eloquent关联查询） #

在app/Http/Controllers/RegistrationController.php里编写处理逻辑，这里用Eloquent的关联查询比直接join更符合Laravel的风格，先确保你的Registration模型已经定义了和Question的关联：

模型关联（先做这个！） #

在app/Models/Registration.php里添加关联方法：

use App\Models\Question;

public function question()
{
    return $this->belongsTo(Question::class);
}

控制器方法 #

use App\Models\Registration;
use Illuminate\Http\Request;

// 主页面加载+表单提交筛选逻辑
public function index(Request $request)
{
    // 默认展示状态1（24小时）的数据，也可以根据请求参数切换
    $status = $request->get('status', 1);
    
    // 用关联查询筛选对应状态的注册数据
    $registrations = Registration::whereHas('question', function($query) use ($status) {
        $query->where('question_schedul', $status);
    })->get();
    
    return view('registrations.index', compact('registrations', 'status'));
}

// AJAX筛选专用方法，返回数据列表部分视图
public function filter(Request $request)
{
    $status = $request->get('status', 1);
    
    $registrations = Registration::whereHas('question', function($query) use ($status) {
        $query->where('question_schedul', $status);
    })->get();
    
    // 返回单独的列表视图，避免重复代码
    return view('registrations._list', compact('registrations'));
}

4. 视图文件编写 #

主视图（resources/views/registrations/index.blade.php） #

<h1>注册数据列表</h1>

<!-- 下拉框 -->
<select id="dropselect">
    <option value="24Hours" {{ $status == 1 ? 'selected' : '' }}>24小时</option>
    <option value="15Days" {{ $status == 2 ? 'selected' : '' }}>15天</option>
</select>

<!-- 数据展示容器 -->
<div id="registrationList">
    @include('registrations._list')
</div>

<!-- 引入jQuery（如果项目里还没引入的话） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 这里放之前的AJAX代码
$(function () {
    $("#dropselect").change(function () {
        let selectedValue = $(this).val();
        let schedulStatus = selectedValue === "24Hours" ? 1 : 2;
        
        $.ajax({
            url: "{{ route('registrations.filter') }}",
            type: "GET",
            data: { status: schedulStatus },
            success: function(response) {
                $("#registrationList").html(response);
            },
            error: function(xhr) {
                console.error('请求出错啦:', xhr);
            }
        });
    });
});
</script>

数据列表部分视图（resources/views/registrations/_list.blade.php） #

把数据展示的逻辑抽成单独视图，方便AJAX更新：

<table border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <!-- 这里根据你的registrations表字段添加其他列 -->
        </tr>
    </thead>
    <tbody>
        @foreach($registrations as $registration)
        <tr>
            <td>{{ $registration->id }}</td>
            <td>{{ $registration->name }}</td>
            <!-- 其他字段按需展示 -->
        </tr>
        @endforeach
    </tbody>
</table>

@if($registrations->isEmpty())
<p>暂无符合条件的注册数据~</p>
@endif

这样整个功能就完整啦，测试的时候注意确保表之间的关联字段正确（比如registrations表的question_id对应questions表的id），还有模型的命名空间和路由的控制器引用都正确哦。

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