Laravel 表单提交后保留下拉选中状态

本文旨在解决 Laravel 应用中表单提交后下拉列表（select）重置的问题。通过利用 Laravel 提供的 request 对象和旧输入值功能，我们能够轻松地在页面刷新后保持用户在下拉列表中选择的选项，从而提升用户体验。本文将详细介绍如何在视图中正确地处理下拉列表的选中状态，并提供相应的代码示例和注意事项。

在 Laravel 应用中，表单提交后页面刷新，下拉列表恢复到默认状态是一个常见的问题。为了解决这个问题，我们需要利用 Laravel 的 request 对象来获取表单提交时选择的值，并在视图中设置 selected 属性。

核心思路：

在表单提交后，通过 request() 辅助函数获取 smsstaff_key 的值，然后在循环生成 option 标签时，判断当前 staffMember->smsstaff_key 是否等于 request('smsstaff_key')，如果相等，则添加 selected="selected" 属性。

实现方法：

以下是修改后的视图代码：

<form action="{{route('exportVehiclesToExcel')}}" method="GET" >
    <div style="display: flex">
        <div>
            <label>Pick a staff member</label>
            <select name="smsstaff_key" id="smsstaff_key" required>
                @foreach ($staff as $staffMember)
                    <option value="{{$staffMember->smsstaff_key}}" {{ request('smsstaff_key') == $staffMember->smsstaff_key ? 'selected' : '' }}>{{$staffMember->name}}</option>
                @endforeach
            </select>
            <div style="margin-left: 3px;">
                <button class="btn btn-primary" formaction="searching">Filter by selected staff member</button>
            </div>
        </div>
        <div style="margin-left: 50px;">
            <label>From:</label>
            <input style="width: 14em"  type="date" class="form-control" name="startDate" value="{{ $startDate }}" required>
        </div>
        <div style="margin-left: 20px;">
            <label>To:</label>
            <input style="width: 14em" type="date" class="form-control" name="endDate" value="{{ $endDate }}" required>
        </div>
        <div style="margin-left: 20px;">
            <button class="btn btn-success" formaction="tech/export/" type="submit">Export filtered</button>
        </div>
    </div>
    <div  style="margin-left: 10px;">
        <a href="{{"/techAll/export/"}}" target="_blank" class="btn ">All to Excel</a>
    </div>
</form>

代码解释：

• request('smsstaff_key'): 使用 Laravel 的 request() 辅助函数来获取名为 smsstaff_key 的请求参数的值。
• {{ request('smsstaff_key') == $staffMember->smsstaff_key ? 'selected' : '' }}: 这是一个三元运算符，判断 request('smsstaff_key') 是否等于当前循环的 $staffMember->smsstaff_key。如果相等，则输出 selected，否则输出空字符串。这会将 selected 属性添加到对应的 option 标签中。

注意事项：

1. 确保请求参数存在： 如果在某些情况下 smsstaff_key 可能不存在于请求中，建议使用 request()->has('smsstaff_key') 来检查参数是否存在，以避免潜在的错误。例如：

   <option value="{{$staffMember->smsstaff_key}}" {{ request()->has('smsstaff_key') && request('smsstaff_key') == $staffMember->smsstaff_key ? 'selected' : '' }}>{{$staffMember->name}}</option>

2. 类型转换： 如果 smsstaff_key 是数字类型，而从请求中获取的值是字符串类型，可能需要进行类型转换，以确保比较的准确性。可以使用 (int) request('smsstaff_key') 将请求参数转换为整数。

3. selected="selected" vs selected: 在 HTML5 中，selected 属性只需要存在即可，不需要指定值。因此，可以使用简写的 selected 代替 selected="selected"。

4. 避免使用 JavaScript： 尽量避免使用 JavaScript 来设置选中状态，因为 Laravel 提供了更简洁和优雅的解决方案。

总结：

通过使用 Laravel 的 request() 辅助函数和三元运算符，我们可以轻松地在表单提交后保持下拉列表的选中状态，从而改善用户体验。 记住要检查请求参数是否存在，并进行必要的类型转换，以确保代码的健壮性。