selectで検索機能optionで選択した月のデータを保持しながら対象の月に遷移させるには

はじめに

先日、投稿検索機能を実装する機会があり、はまってしまったので備忘録として記載しました。

概要

Laravelでプルダウン検索機能のような実装依頼があり、実装にあたり以下の条件がありました。
・プルダウンを選択するタイミングで画面を遷移させる(検索ボタンを配置させない)
・現状、ある程度の検索機能は実装済み(コントローラ等)だが、対象の月を選択すると遷移時に選択した値が保持されない
（例えば、4月と５月を選択できるプルダウンがあり初期値は現在月）

解決コード

半日くらい費やしながら調べに調べ尽くした結果が、以下のコードです

index.blade.php

 <form method="GET" action="{{ route('article.search') }}">
  @csrf
  {{-- プルダウンカテゴリ検索 --}}
   <div class="article-search-container">
      <div class="article-search">
       <select name="article_date" onchange="this.form.submit()">
           @foreach ($datemonths as $key => $datemonth)
              <option value="{{ $datemonth }}"  @if(old('article_date', $article_date ?? '') == $datemonth) selected @endif>
                 {{ $datemonths_kanji[$key] }}
              </option>
           @endforeach
       </select>
     </div>
   </div>
</form>

解説

プルダウンを選択するタイミングで画面を遷移させる(検索ボタンを配置させない)

プルダウンを選択するタイミングで画面を遷移させる(検索ボタンを配置させない)ですが、こちらはJavaScriptのonchangeメソッドをselectタグに以下を記載すると動作しました。

selectタグのoptionが変更されるとJavaScriptのonChangeが検知してsubmitされるようになってます。
こちらのthisですが、Windowオブジェクトを参照してます。

<select name="article_date" onchange="this.form.submit()">

対象の月を選択すると遷移時に選択した値が保持されない

現状、ある程度の検索機能は実装済み(コントローラ等)だが、
（例えば、4月と５月を選択できるプルダウンがあり初期値は現在月）

以下のコードで問題解決しました。

 <option value="{{ $datemonth }}"  @if(old('article_date', $article_date ?? '') == $datemonth) selected @endif>
     {{ $datemonths_kanji[$key] }}
 </option>

こちらのコードを解説すると、old関数に第二引数を登録すると初期値を登録するとことができます。
つまり、oldの第二引数が存在していたら、＄article_dateと$datemonthを比較できます。

    @if(old('article_date', $article_date ?? '') == $datemonth) selected @endif

まとめ

上記のコードで私は問題解決できました。
状況によっては解決できない場合は改善していくのが、ベストですね