表示の絞り込み等で複数のセレクトメニューを使用している時、送信ボタンをクリックしなくてもセレクトメニューに変更があった時点で送信してくれると便利な場合がある。
ちなみにセレクトメニュー(プルダウンメニュー)が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