フォーム（リスト編）

Index Back Next

【リスト】

幾つかの選択肢があるような場合，リストボックスなどを使用することがあります．ここではそのリストについて簡単に説明します．

  1. リストボックス

    2. リストボックスを作成するには， 
    	<FORM>
	<SELECT NAME="LBox" SIZE=3>
	<OPTION>選択肢1
	<OPTION>選択肢2
	<OPTION>選択肢3
	<OPTION>選択肢4
	<OPTION>選択肢5
	</SELECT>
	</FORM>
    とします．NAMEオプションはリストボックスの名前，SIZEオプションは表示行数．

  2. ドロップダウンリスト

    3. ドロップダウンリストを作成するには， 
    	<FORM>
	<SELECT NAME="DList" SIZE=1>
	<OPTION>選択肢１
	<OPTION>選択肢2
	<OPTION>選択肢3
	<OPTION>選択肢4
	<OPTION>選択肢5
	</SELECT>
	</FORM>
    とします．NAMEオプションはドロップダウンリストの名前，またドロップダウンリストの場合SIZEオプションは1に設定します．２以上の値を設定した場合は通常のリストボックスになってしまいます．

では実際にリストを利用してプログラムを作成してみます．

  1. リストボックス

    2. 好きな果物を，リストボックスにより選択して，その結果をテキストボックスに表示します．

    ［例］

    	<SCRIPT LANGUAGE="JavaScript">
	<!-- 
	function Select( parts ){	//(1)
		var i,Msg;
		for (i = 0; i < parts.options.length; i++){		//(2)
			if ( parts.options[i].selected ){		//(3)
				Msg = Msg + "と " + parts.options[i].value;		//(4)
			}
		}
		document.Lst.val.value = Msg	//(5)
	} 
	//-->
	</SCRIPT>

	好きな果物は？(複数選択可能　Ctrlキー + Click）<P>
	<FORM NAME="Lst">		//(6)
	<SELECT SIZE=5 MULTIPLE NAME="Slct" ONCHANGE="Select(this)">
	<OPTION VALUE="">好きな果物は(複数可）？
	<OPTION VALUE="みかん">みかん
	<OPTION VALUE="ぶどう">ぶどう
	<OPTION VALUE="もも">もも
	<OPTION VALUE="りんご">りんご
	<OPTION VALUE="いちご">いちご
	</SELECT><P>
	あなたの好きな果物は<INPUT NAME="val" SIZE=15>です．
	</FORM>

    【解説】

    (1)選択内容が変化したときに，呼び出されます．
    (2)parts.option.lengthは，
1998(C) Motonari Morikawa