JavaScriptプルダウン制御

WEBサイト制作ではAjaxに代表されるように、どんどんJavaScriptとホームページが密接になってきました。

そのような理由から今回もJavaScriptについてもある程度の知識を増やしていきます。

今回はフォームタグ内に設置されたプルダウンメニュー(リストボックス)の制御をしてみましょう。

プルダウンメニューとはformタグ内にあるselectタグおよびoptionタグですね。

selectタグに表示されるoption項目をjavascriptでコントロールするための方法です。

selectオブジェクトにはたくさんのオプションがありますが、今回はJavaScript側の記述を中心にします。

【HTMLコードが以下の場合】

■select内option選択

function selectOption(){
document.form.s1.selectedIndex = 2;
}

とすると、selectOption()が実行された場合に、メニュのオプション3が選択されて表示されます。
selectedIndexは一番上が0からの番号が振られています。

またselectedIndexはユーザーが選択したリスト項目ボックスの数値を取得することも可能です。

■option項目のテキストデータを抽出

document.write (form.s1.options[0].text);

では、『オプション1』が新規ウィンドウに表示されます。

■option項目も値(value)を参照

document.write (form.s1.options[1].value);

では、"o2"が新規ウィンドウに表示されます

以上三つの基本的な参照記述を把握していれば、後は用途に応じて制御することができるでしょう。