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

[やり方]

  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;
  5. セレクトボックスへのアクセス方法


    <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>
    

    インデックスにもどる