【HTML/JS】selectタグで囲んだ内容を選択後にボタンを押さずにsubmitして、遷移させる方法

はじめに

タイトルの通りです。調べるとすぐ出てくると思いますが、自分へのメモ用に記しておきます。

Laravelで検査機能を作成しているときにselect タグが3つあり、いちいちoptionを選んでから、submitを押すのはめんどくさかったので、この機能が欲しくなりました。

この記事を参照しました。

セレクトボックスを選択したらサブミット - Qiita

やり方

selectタグに

onchange="submit(this.form)"

をかけば良いだけ。

どんな感じか

$years = [2015, 2016, ... 2020]

が入っているとします。

<form action="{{ route('user.index') }}" method="get">
  @csrf
    <select onchange="submit(this.form)" type="search_year" name="search_year">
       @foreach ($years as $year)
       <option value="{{ $year }}">{{ $year }}</option>
       @endforeach
    </select>
</form>

こんな感じで出来ます。this.from と書くことで、formタグ にアクセスできるということですね。

終わり。

​