<select>タグの中の選択されている<option>タグを取得する

選択されている<option>タグを取得

<select>タグで選択されている<option>タグは、'select'エレメントの'selectedIndex'にインデックス番号で格納されています。

<!doctype html>
<html>
<head>
<meta charset="UTF-8"> 
<script type="text/javascript" language="javascript">
<!--
function OnChange()
{
	// selectエレメント取得
	var elmSelect = document.getElementById( "id_select" );

	// 選択されているoptionタグのインデックスを取得
	var index = elmSelect.selectedIndex;

	// lengthを表示
	document.getElementById( "id_result" ).innerHTML = "select.index = " + index + "<br/>";
}
// -->
</script>
</head>
<body onload="OnLoad()">
<h1>&lt;select&gt;タグの中の選択されている&lt;option&gt;タグを取得する</h1>
<select id="id_select" onchange="OnChange();">
<option>アイテム１</option>
<option>アイテム２</option>
<option>アイテム３</option>
<option>アイテム４</option>
<option>アイテム５</option>
</select>
<h2>実行結果</h2>
<div id="id_result">
</div>
</body>
</html>

サンプルの実行

実行結果

select.index = 3

好きな写真でカレンダーを作成
「カレンダー作成」無料です

ＰＣとスマフォでスケジュールを管理！！
Googleカレンダーと同期できるスケジューラ
FavGCalScheduler無料です。

「プロ生ちゃんカレンダー作成」無料です

画像ファイル、写真を簡単にリサイズ！！
ホームページ用の素材を簡単に作成可能
FavPhotoResize無料です。

わびさびサンプルソース

WindowsやHTML5などのプログラムのサンプルコードやフリーソフトを提供します。

わびさびサンプルソース