2016-08-17

プルダウンメニューを選択後に即POSTかGETするselectタグの書き方

はじめに

HTMLでフォーム周りを作成しているときに、プルダウンメニューから語句を選択した後に、ボタンを押してPOSTまたはGETリクエストを送信するのが少々煩わしかったので、メニューから語句を選択したと同時にリクエストが送信される方法が無いか、探したらあったのでメモ。

方法

以下のように、「select」に「onchange="this.form.submit()」を記述すればOK。

HTML

注意点としては、「option」の先頭にある語句は選択できなくなってしまうので、予防策として一つ目のoptionには空の語句を設定しておきましょう。

画面表示

選択前

選択前

選択後

選択後

このようにボタンがなくてもGETされていることが分かります。

さいごに

単体の固定データの参照などにうってつけの設定だと思うので、ボタンに煩わしさを感じた方は是非お試しください。



コメントする(※は必須項目です)













画像認証