読者です 読者をやめる 読者になる 読者になる

Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

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

Javascript

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>


この時、"One"と"Two"を選択する。するとコンソールにはしっかり"One"と"Two"の結果が出力される。成功!

0
One
1
Two


簡単なスクリプトだが、参考にどうぞ!

広告を非表示にする