本文旨在解決 Laravel 應(yīng)用中下拉列表在提交后重置的問題。通過利用 Laravel 的請求對象，我們將演示如何在頁面刷新后保持用戶在下拉列表中選擇的選項，從而提升用戶體驗。文章將提供詳細(xì)的代碼示例和解釋，幫助開發(fā)者輕松實現(xiàn)該功能。

在 Laravel 應(yīng)用中，經(jīng)常會遇到需要在表單提交后保持用戶選擇的下拉列表值的情況。默認(rèn)情況下，頁面刷新會導(dǎo)致下拉列表重置到初始狀態(tài)，這會影響用戶體驗。本文將介紹如何利用 Laravel 的請求對象 request() 來解決這個問題，確保頁面刷新后下拉列表仍然顯示用戶上次選擇的選項。

核心思路：利用 request() 對象傳遞和獲取表單數(shù)據(jù)

Laravel 提供了 request() 對象，用于訪問當(dāng)前請求的所有數(shù)據(jù)，包括 GET 和 POST 參數(shù)。我們可以利用 request()->input('name') 方法獲取指定名稱的輸入值，并在渲染下拉列表時，根據(jù)這個值設(shè)置 selected 屬性。

實現(xiàn)步驟：

1. 在視圖中使用 request()->input() 設(shè)置 selected 屬性

   修改下拉列表的 HTML 代碼，使用三元運算符判斷當(dāng)前選項是否與 request()->input('smsstaff_key') 的值相等。如果相等，則添加 selected="selected" 屬性。

   <select name="smsstaff_key" id="smsstaff_key" required>
       @foreach ($staff as $staffMember)
           <option value="{{$staffMember->smsstaff_key}}" {{ request()->input('smsstaff_key') == $staffMember->smsstaff_key ? 'selected="selected"' : '' }}>{{$staffMember->name}}</option>
       @endforeach
   </select>

   代碼解釋：

   • request()->input('smsstaff_key')：獲取名為 smsstaff_key 的輸入值，也就是用戶選擇的 staff member 的 smsstaff_key。
   • $staffMember->smsstaff_key：當(dāng)前循環(huán)遍歷的 staff member 的 smsstaff_key。
   • request()->input('smsstaff_key') == $staffMember->smsstaff_key ? 'selected="selected"' : ''：如果兩個值相等，則返回 selected="selected"，否則返回空字符串。

2. 確保 Controller 中正確傳遞數(shù)據(jù)

   在 Controller 中，確保在將數(shù)據(jù)傳遞給視圖時，包含 request()->input('smsstaff_key') 的值。例如：

   public function searching(Request $request)
   {
       $smsstaff_key = $request->input('smsstaff_key');
       $startDate = $request->input('startDate');
       $endDate = $request->input('endDate');
   
       // 獲取符合條件的記錄
       $records = YourModel::where('smsstaff_key', $smsstaff_key)
                           ->whereBetween('date', [$startDate, $endDate])
                           ->get();
   
       // 將數(shù)據(jù)傳遞給視圖
       return view('your_view', compact('staff', 'records', 'startDate', 'endDate', 'smsstaff_key'));
   }

   代碼解釋：

   • $request->input('smsstaff_key')：從請求中獲取 smsstaff_key 的值。
   • compact('staff', 'records', 'startDate', 'endDate', 'smsstaff_key')：將變量 staff, records, startDate, endDate, 和 smsstaff_key 打包成一個數(shù)組，傳遞給視圖。

3. 避免 undefined array key 錯誤

   之前嘗試使用 JavaScript 來獲取 $_GET['smsstaff_key'] 的方法會報錯，是因為當(dāng)頁面首次加載時，$_GET 數(shù)組中可能不存在 smsstaff_key 這個鍵。使用 Laravel 的 request()->input() 方法可以避免這個問題，因為它會自動處理不存在的鍵，返回 null。

完整示例代碼（視圖）：

<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()->input('smsstaff_key') == $staffMember->smsstaff_key ? 'selected="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>

總結(jié)：

通過使用 Laravel 的 request()->input() 方法，可以輕松地在頁面刷新后保持下拉列表的選中狀態(tài)。這種方法簡單易懂，并且避免了使用 JavaScript 直接操作 $_GET 數(shù)組可能出現(xiàn)的錯誤。 確保在 Controller 中正確地傳遞數(shù)據(jù)，并在視圖中正確地設(shè)置 selected 屬性，就能實現(xiàn)所需的功能，提升用戶體驗。

以上がLaravelで選択後にドロップダウンリストがリセットされる問題を解決するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。