フォーム選択をしたらoptionの選択内容をメッセージダイアログに表示します。
応用:optionを増やしたり、option value="文章"の文章などを好きな言葉に取り替えて使えます。
参照: onChange, alert(), options[Index番号], selectedIndex, value,
<html>
<head>
<title></title>
</head>
<body>
<form name="f1">
<select name="s1"
onChange="alert(f1.s1.options[f1.s1.selectedIndex].value)">
<option value="選んでよ〜(~~;">選んでちょ(^^)/
<option value="悲しい(;_;)">選択1
<option value="しあわせ(#^^#)">選択2
<option value="ばいばい(^^)/~">選択3
</select>
</form>
</body>
</html>
onChange="命令文"でフォームの入力内容が変更されたら"命令文"を実行するという意味です。select,text,textareaで使用できますalert("文章")で"文章"の入ったダイアログを表示します
f1.s1.options[番号].valueはf1という名前の、フォームの中のs1という構成要素(この場合はSELECTタグ)の、OPTIONの中の[??番目]の、value(つまり値)を意味しています。たとえば、0番目は"選んでよ〜(~~;"で、1番目は"悲しい(;_;)"です
で、このoptions[番号]のところに書いてあるf1.s1.selectedIndexは、このSELECTタグ内のOPTIONの番目が選ばれたかを0から始まる番号で返します。selectedIndexのiは大文字のIなので要注意
ちなみに、たとえばf1.s1.options[1].textと書くと 選択1 という文字が表示されます
f1.s1.options[番号].valueをforms[番号].elements[番号].options[番号].valueと書く方法もあります。これはforms[番号]番目のフォームの、elements[番号]番目の構成要素の、options[番号]番目のオプションの、value(値)という意味です
更に、f1.s1などの名前をいちいち指定するのが不便な場合には、thisを使ってたとえば、
<select onChange="alert(this.options[this.selectedIndex].value)">のように書くこともできます
サンプルA1201 thisを使った場合 SIMPLA1201.HTM
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)