2008年06月24日

セレクトメニューの設置 値の取得 onchangeイベント

スポンサード リンク

セレクトメニュー 選択リストの一覧が下に展開して表示されます。ドロップダウンメニュー、プルダウンメニュー、オプションメニューとか呼ばれています。

リストを選択してください。

サンプルソース

<HTML>
<HEAD>
<TITLE>プルダウンメニューの設置 値の取得</TITLE>
<SCRIPT language="JavaScript">
<!--
function Selc(Obj){
index_nub = Obj.selectedIndex; //選択された項目番号を取得する
msg="項目番号は " +"<SPAN style='color : red;'>"+index_nub+"</SPAN><br>";
O_value=Obj.options[Obj.selectedIndex].value; //選択された項目の値を取得する
msg=msg+"項目の値は " +"<SPAN style='color : red;'>"+O_value+"</SPAN><br>";
T_value = Obj.options[Obj.selectedIndex].text; //選択された項目のタイトルテキストを取得する
msg=msg+"項目のタイトルテキストは " +"<SPAN style='color : red;'>"+T_value+"</SPAN>";
document.getElementById("comt").innerHTML = msg;
}
// -->
</SCRIPT>

</HEAD>
<BODY>
<SELECT name="news" onchange="Selc(this)">
<OPTION value="*" selected>----新聞----</OPTION>
<OPTION value="http://www.yomiuri.co.jp/">読売新聞</OPTION>
<OPTION value="http://www.mainichi.co.jp/">毎日新聞</OPTION>
<OPTION value="http://www.nikkei.co.jp/">日本経済新聞</OPTION>
<OPTION value="*">----テレビ----</OPTION>
<OPTION value="http://news.tbs.co.jp/">TBS News i</OPTION>
<OPTION value="http://www.fujitv.co.jp/">フジテレビ</OPTION>
</SELECT>
<P id="comt" style="font-weight : bold;color : green;">リストを選択してください。</P>
</BODY>
</HTML>

Obj.selectedIndex; //選択した項目の上からの番号 '0' から数えます <OPTION value="http://www.yomiuri.co.jp/">読売新聞</OPTION>は '1' を返します。
Obj.options[Obj.selectedIndex].value; //項目番号の値(value)を得ます。"http://www.yomiuri.co.jp/"。
Obj.options[Obj.selectedIndex].text; //項目番号のタイトルテキスト(text)を取得します。"読売新聞"。

document.getElementById("comt").innerHTML = msg;// id名がcomtのタグにinnerHTMLでmsgで得たテキストを書き出します。
innerHTML // 参照(取得)も設定もでき タグやテキストを自由に書き換えできる、非常に便利なプロパティです。
onchange //選択項目を変えた時のイベント。
selected //最初に表示される項目。
style="font-weight : bold;color : green;"// スタイルシートで 文字の太さを 太い、文字の色を green(緑)に設定しています。



posted by javaScript at 14:28 | 大阪 ☁ | メニュー作成 | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。