DOJEUN's Notepad
 LISTへ 

【Javascript】select タグの表示値を求める方法

select タグの表示値を求める方法 select タグの「value」ではなく表示値を取得するサンプルです。


IDで取得方法とNAMEで取得する方法のサンプルコード

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="Content-Language" content="ja">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<title>Javascript- select タグの表示値を求める方法</title>
<script type="text/javascript">
<!--
function fncTEST01(){
	var vv = window.document.getElementById("selAREA").options[document.getElementById("selAREA").selectedIndex].text;
	alert(vv);
}

function fncTEST02(){
	var obj = window.document.getElementsByName("selKUBUN");
	var len = obj.length;
	for(i =0; i < len; i++){
		var vv = window.document.getElementsByName("selKUBUN")[i].options[document.getElementsByName("selKUBUN")[i].selectedIndex].text;
		alert(vv);
	}
}
//-->
</script>
</head>
<body>
<form name="frm1">
<span>地域:</span>
<select id="selAREA">
	<option value="A">東京</option>
	<option value="B">神奈川</option>
	<option value="C">福島</option>
	<option value="D">栃木</option>
</select>
<br />
<span>IDで取得:このボタンは地域リストボックスで選択した表示名を取得します。</span><br/>
<input type="button" value="TEST-A" onclick="fncTEST01()" /><br /><br />

<span>区分A:</span>
<select name="selKUBUN">
	<option value="A">Computer</option>
	<option value="B">TV</option>
	<option value="C">Car</option>
</select>
<br />
<span>区分B:</span>
<select name="selKUBUN">
	<option value="A">Computer</option>
	<option value="B">TV</option>
	<option value="C">Car</option>
</select>
<br />
<span>区分C:</span>
<select name="selKUBUN">
	<option value="A">Computer</option>
	<option value="B">TV</option>
	<option value="C">Car</option>
</select>
<br />
<span>NAMEで取得:このボタンは区分A~Cのリストボックスで選択した表示名を取得します。</span><br/>
<input type="button" value="TEST-B" onclick="fncTEST02()" /><br /><br />
</form>
</body>
</html>