FORMとの連動

SELECT編

<SELECT>では、OnChange引数が使えます。 これを使うと選んだメニューを変更したときにイベントを捕まえることが できます。

メニューの番目の項目が選択されました。 
<FORM METHOD="POST" NAME="f">
<SELECT NAME="sel" ONCHANGE="ChangeSelection(this.form, this)">
<OPTION VALUE="0th? item" SELECTED>0th? item
<OPTION VALUE="1st item">1st item
<OPTION VALUE="2nd item">2nd item
<OPTION VALUE="3rd item">3rd item
<OPTION VALUE="4th item">4th item
<OPTION VALUE="5th item">5th item
</SELECT>
メニューの<INPUT NAME="num" SIZE="20">番目の項目が選択されました。
</FORM>
<HR>
<SCRIPT LANGUAGE="JavaScript">
function ChangeSelection(form, selection) {
	v = selection.selectedIndex; // 何番目のものが選ばれたかなので
                                     // VALUEフィールドとは違う
	form.num.value = v;
}

</SCRIPT>
メニューが選ばれるとChangeSelection()が実行される。 何番目のメニューが選ばれたかはselectedIndexで分かる。 最初のメニュー項目が0、次が1、…という値が帰ってくる。