プルダウンでの検索結果保持について
テキストフォームみたいに検索の内容をそのまま持ってくる方法は簡単ですが、プルダウンはselectedで検索結果を保持する必要があるので同じ方法とはいかないです。しかし三項演算子を使うことによってそれなりに簡単に実装ができるようです。今回はLaravelで実装した場合の手順になります。
検索機能の実装については下記の投稿が参考になれば幸いです。
手順
今回サンプルで作ったプルダウンの検索フォームです。ファッションのタイプで検索するフォームの想定です。
show.blade.php
商品管理システム
<form action="{{route('item.show')}}" method="get">
<select name="search3" id='type'>
<option value="">選択してください</option>
<option value="0">カジュアル</option>
<option value="1">モード</option>
<option value="2">キレイめ</option>
<option value="3">ナチュラル</option>
<option value="4">コンサバ</option>
</select>
<button type="submit">検索</button>
</form>
一覧を表示する画面です
show.blade.php
<table>
<tr>
<th>ID</th>
<th>名前</th>
<th>種別</th>
<th>詳細</th>
</tr>
@foreach ($items as $item )
<tr>
<td>{{$item->id}}</td>
<td>{{$item->name}}</td>
<td>{{$item->type}}</td>
<td>{{ Str::limit($item->detail, 30, '...') }}</td>
<td><a href="{{route('item.store',$item->id)}}">詳細</a></td>
<td><a href="{{route('item.edit',$item->id)}}">更新</a></td>
<td><a href="{{route('item.destroy',$item->id)}}">削除</a></td>
</tr>
@endforeach
</table>
現状のままだと検索をかけてもControllerから戻ってくる値がフォームのプルダウンに反映されないので検索をかけても保持されず、「選択してください」の文字がデフォルトで表示されます。なのでフォームに以下のように記述を加えます。
show.blade.php
商品管理システム
<form action="{{route('item.show')}}" method="get">
<select name="search3" id='type'>
<option value="">選択してください</option>
<option value="0" {{request()->search3 =='0'? "selected" : "";}}>カジュアル</option>
<option value="1" {{request()->search3 =='1'? "selected" : "";}}>モード</option>
<option value="2" {{request()->search3 =='2'? "selected" : "";}}>キレイめ</option>
<option value="3" {{request()->search3 =='3'? "selected" : "";}}>ナチュラル</option>
<option value="4" {{request()->search3 =='4'? "selected" : "";}}>コンサバ</option>
</select>
<button type="submit">検索</button>
</form>
{{request()->search3 =='0'? "selected" : "";}}の中身を説明します。
プルダウンに入力した文字はController側からrequest()->search3に入ってきます。
上記のコードだと、それぞれプルダウンで入力した値が帰ってくるのですが、それを、'0'? "selected" : ""（プルダウンの値が0だった場合、selectedを返す、なければ空を返す）という形にしてあげます。これをoptionの数だけ生成することでプルダウンの検索結果を保持することができます。