セレクトボックス（ドロップダウン）の値を取得する

[やり方]

1. HTML文章中に<form name=" ". <select name=" ">をつける
2. 変数1 = document.formのname名.selectのname名.selectedIndex;　//まずインデックス番号（optionの上から順に0,1,2,3...）を取得して変数に入れる
3. 変数2 = document.formのname名.selectのname名.options[インデックス番号].value; // [ ]内に上で取得したインデックス番号（変数1）を入れたoptionsを追加して変数に入れる
4. テキストの値を取得の場合 = document.formのname名.selectのname名.options[インデックス番号].text;



選択して下さい 巨人 阪神 中日 広島 ヤクルト DNA



<form name="sample">
<select name="team_name" id="team_name">
		<option value="">選択して下さい</option>
		<option value="G">巨人</option>
		<option value="HS">阪神</option>
		<option value="CH">中日</option>
		<option value="CA">広島</option>
		<option value="SW">ヤクルト</option>
		<option value="DNA">DNA</option>
</select>

<script type="text/JavaScript">
var event = document.getElementById('team_name');
event.onchange = function(){ // セレクトボックスに変更が加えられたら
	var indx = document.sample.team_name.selectedIndex; // selectedImdexは「今」選択されているoptionを指す。返り値は数字。
	
	※var i = document.sample.team_name.options; // 全てのoptionにアクセスする場合はこう書く
	
	var val = document.sample.team_name.options[indx].value; // optionのvalueを取得
	var txt = document.sample.team_name.options[indx].text; // optionのtextを取得

	
	if(indx != 0 ){ // インデックスが0番でなかったら
		var kekka_index = "optionのインデックス番号は" + indx + "です。";
		document.getElementById('result1').innerHTML = kekka_index;
		var kekka_value = "optionのvalue値は" + val + "です。";
		document.getElementById('result2').innerHTML = kekka_value;
		var kekka_text = "optionのテキストは" + txt + "です。";
		document.getElementById('result3').innerHTML = kekka_text;
	}else{
		alert("選択して下さい");
	}
}

</script>

インデックスにもどる