読者です 読者をやめる 読者になる 読者になる

ホームページ制作講座

ホームページ制作のHTMLやCSS、JavascriptやDTDとかDreamweaverなどWEB制作について

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"が新規ウィンドウに表示されます


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