select-multipleで複数選択した際にJSでoptionを取得する方法

DOM関連の記事を書いているときにelementオブジェクトのselectedIndexプロパティについてふと疑問に思ったことがあったので、わかったことを書いておく。

selectedIndexとはselectタグ内のoptionにアクセスし、何番目のoptionが選択されているかを返すプロパティである。例えば以下のように使う。

<body>
<select id="sel" multiple>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>
<input type="button" value="push" onclick="selSingle()">
<script>
function selSingle(){
  var e = document.getElementById('sel');
  console.log(e.selectedIndex);  // 添え字出力
  console.log(e.children[e.selectedIndex].textContent);  // 文字列出力
}
</script>
</body>

この時、"One"のみを選択したとする。するとコンソールには以下の結果が出力される。

0
One

次にこのselectはmultiple属性が与えられているので、"One"と"Two"を選択する。するとコンソールには最初に該当する"One"だけ出力され、"Two"は無視されてしまう。

0
One

というわけでselect-multipleに対応するJSが必要であるため作ってみた。

<body>
<select id="sel" multiple>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>
<input type="button" value="push" onclick="selMulti()">
<script>
function selMulti(){
  var e = document.getElementById('sel');
  var ary = new Array();
  var num = 0;

  //optionを順番に見て、selectedとなっているものの添え字を配列にいれる
  for(var i = 0; i < e.childElementCount; i++){
    if(e.getElementsByTagName('option')[i].selected){
      ary[num] = i;
      num++;
    }
  }
  // for..in文でまわして、配列にいれた添え字と、添え字をもとに文字列を出力させる
  for(var txt in ary){
    console.log(ary[txt]);  // 添え字出力
    console.log(e.children[ary[txt]].textContent);  // 文字列出力
  }
}
</script>
</body>