Javascript複数のセレクトメニュー(プルダウンメニュー)どちらかが変更されたらGETで送信したい時

表示の絞り込み等で複数のセレクトメニューを使用している時、送信ボタンをクリックしなくてもセレクトメニューに変更があった時点で送信してくれると便利な場合がある。

ちなみにセレクトメニュー(プルダウンメニュー)が1個の場合は

Javascript

function navi(c){
var class = c.options[c.selectedIndex].value;
location.href = '?c=' + class;
}

HTML

<form method="get" action="" name="form">
	<select name="class" onChange="navi(this)" id="class-items">
		<option value="0">全クラス表示</option>
		<option value="1">1組</option>
		<option value="2">2組</option>
	</select>
</form>

上記ではクラスのプルダウンを変更すると同ページにGETで引数が付いた状態でジャンプする。

例 http://www.digital-gate.com/?c=3

セレクトメニュー(プルダウンメニュー)が2個の場合は

Javascript

function multipleNavi(obj){
var class = document.form.class.value;
var group = document.form.group.value;
location.href = '?c=' + class + '&g=' + group;
}

HTML

<form method="get" action="" name="form">
	<select name="class" onChange="multipleNavi()" id="class-items">
		<option value="0">全クラス表示</option>
		<option value="1">1組</option>
		<option value="2">2組</option>
	</select>
	<select name="group" onChange="multipleNavi()" id="group-items">
		<option value="0">全グループ表示</option>
		<option value="1">グループ1</option>
		<option value="2">グループ2</option>
	</select>
</form>

上記ではクラスまたはグループいずれかのプルダウンを変更すると同ページにGETで両方の引数が付いた状態でジャンプする。

例 http://www.digital-gate.com/?c=2&g=1

 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク