JavaScriptからselectタグの情報を取得しよう

javascriprからHTMLのselectタグの選択されている要素の値を取得しようとすると、該当のselectタグをオブジェクトとして引っ張ってきて、どのoption要素が選択されているか判定して、値を取り出さなくてはいけません。

でも、あんまりselectタグを使う機会がないので、いつも忘れちゃっうんですよねぇ。で、その都度検索するのもバカらしいので、自分用にメモメモです。

サンプルソースは以下の通りです。

<select id="s1" onChange="selectedValueSample()">
  <option value="MS-06F">ザク</option>
  <option value="MS-07B">グフ</option>
  <option value="MS-09">ドム</option>
</select>

<script type="text/javascript">
function selectedValueSample() {
  var element = document.getElementById("s1");
  for(var i=0; i<element.options.length; i++) {
    var option = element.options[i];
    if(option.selected) {
      alert("選択されたのは '"+i+"' 番目の「"+option.value+"」( "+option.innerHTML+" )です。");
    }
  }
}
</script>