FORMとの連動

SELECT MULTIPLE編

<SELECT>タグにMULTIPLE引数を指定すると、複数の項目を選択できるような メニューを作ることができます。

メニューの番目の項目が選択されました。 


<FORM METHOD="POST" NAME="f">
<SELECT SIZE="5" MULTIPLE NAME="sel" OnChange="ChangeSelection(this.form, this)">
<OPTION VALUE="0th? item">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) {
	var v = "";
	for (i = 0; i < selection.options.length; i++) {
	    if (selection.options[i].selected) {
		v = v + " " + i
            }
        }
	form.num.value = v;
}
</SCRIPT>
複数の項目が選択されている可能性がありますから、for文で一つずつチェック していく方法をとります。項目の個数はselection.options.length個(つまり 0〜selection.options.length-1まで)あります。

選択されているかどうかは selection.options[i].selectedが真か偽かを見ると分かります。またこの selection.options[i].selectedに真偽値を代入して、選択された状態を スクリプトから変更することもできます。