第38回 「セレクトメニュー」
今回はセレクトメニューで選択された番号を取得するスクリプトを作成します。セレクトメニューはフォームの中で<select>タグ単独ではなく<option>タグと組み合わせて使用します。表示される選択項目の数は<option>タグで列記した数と同じになります。
選択された項目の番号を知る手軽な方法としては<select>タグのonChangeイベントがあります。これはセレクトメニュー項目で違う項目が選択された場合に発生し以後に続く命令を実行します。通常は関数を呼び出すようにします。
呼び出された関数側ではselectedIndexを使って選択された項目番号を取得できます。項目番号は0から始まるので注意してください。例えば
<option>ABC</option>
<option>DEF</option>
<option>GHI</option>
とあればABCの項目番号は0、DEFが1，GHIが2となります。
項目番号を取得するには以下のようにスクリプトを書きます。
document.フォーム名.セレクトメニュー名.selectedIndex
例えば
<form name="selFORM">
<select name="selMENU">
のようになっている場合は
n = document.selFORM.selMENU.selectedIndex
とすれば変数nに選択された項目番号が入ります。
実際のプログラムは以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function check()
{
n = document.selFORM.selMENU.selectedIndex;
alert(n+"番目が選ばれました");
}
// --></script>
</head>
<body>
<form name="selFORM">
<select name="selMENU" onChange="check()">
<option>ABC</option>
<option>DEF</option>
<option>GHI</option>
</select>
</form>
</body>
</html>
この方法だとフォームの名前やセレクトメニューの名前に依存してしまいます。今までもやったようにthisを使って記述すればフォームの名前やセレクトメニューの名前や出現順序に依存しなくなります。選択番号はonChangeイベント内で
this.selectedIndex
とすれば取得できます。実際のプログラムは以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function check(n)
{
alert(n+"番目が選ばれました");
}
// --></script>
</head>
<body>
<form name="selFORM">
<select name="selMENU" onChange="check(this.selectedIndex)">
<option>ABC</option>
<option>DEF</option>
<option>GHI</option>
</select>
</form>
</body>
</html>
次回はセレクトメニューを使って指定したページにジャンプする方法について説明します。