• HTMLCSS

【HTML】selectタグを選択したらformをsubmit（送信）する方法

selectタグで任意のoptionを選択したら、formをsubmitさせたい。

本記事ではこのような悩みを解決します。

実装サンプル

See the Pen
selectタグで選択したらsubmitさせる方法 by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

selectタグで任意の項目を選択したら、formがsubmitされaction属性の値に記述されてるURLへ遷移してます。

実装方法は以下の通りです。

onchange属性をselectタグに付与する

<form method="get" action="https://kasumiblog.org/">
  <select name="choice" onchange="submit(this.form)">
    <option value="">選択01</option>
    <option value="">選択02</option>
  </select>
</form>

selectタグにonchange属性を付与します。

onchange属性は要素の内容が変更された際、実行したい処理がある場合に使う属性になります。

値をsubmit(this.form)とします。

submit()メソッドで送信処理を実行。

引数をthis.formとすることで、selectタグのformが参照され処理されます。

以上で実装完了です。

まとめ

selectタグで任意のoptionを選択したら、formをsubmitさせる方法について紹介しました。

以上で解説を終わります。