【JavaScript】セレクトボックスのoptionをforEachでループする

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでセレクトボックスのoptionをforEachでループする方法をご紹介しています。

selectのoptionの数だけループする処理を作るにはどうすればいいんだろう？

上記の疑問にお答えします。

では、解説していきます。

selectのoptionをforEachでループする

select要素からoption要素を取得して、option要素の数だけループする処理を作成します。

select要素からoption要素を取得するにはoptionsプロパティを使用します。optionsプロパティはHTMLCollectionを返すため、配列への変換が併せて必要になります。

下記にサンプルソースを用意しています。JavaScriptの処理についてはコメントをご参照いただければ幸いです。

HTML

<div id="app">
    <select id="list" name="list">
        <option value="vuejs" selected>Vue.js</option>
        <option value="react">React</option>
        <option value="angular" disabled>Angular</option>
    </select>
</div>

JavaScript

//select要素をidで取得
const list = document.getElementById('list')
//select要素のoption要素を取得
const options = list.options

//HTMLCollectionを配列に変換してループ
Array.from(options).forEach(function(option) {
    //option要素のラベル（テキスト）
    console.log('Label：' + option.label) //or option.text
    //option要素の値
    console.log('Value：' + option.value)
    //option要素の選択状態
    console.log('Selected：' + option.selected)
    //option要素の選択状態
    console.log('Disabled：' + option.disabled)
});

実行すると下記の結果を得ることができます。（見やすいように一部改行を入れています。）

実行結果

"Label：Vue.js"
"Value：vuejs"
"Selected：true"
"Disabled：false"

"Label：React"
"Value：react"
"Selected：false"
"Disabled：false"

"Label：Angular"
"Value：angular"
"Selected：false"
"Disabled：true"

以上でselectのoptionをforEachでループすることができます。

HTMLCollection→配列の変換について

optionsプロパティは指定した要素のHTMLCollectionを返します。 HTMLCollectionはそのままではループに向かないため、一度配列に変換してあげる必要があります。

HTMLCollection

HTMLOptionsCollection(3) 
0: option
1: option
2: option
length: 3
selectedIndex: 0

Array

object Array(3)
[
 <option value="vuejs" selected="">Vue.js</option>,
 <option value="react">React</option>,
 <option value="angular" disabled="">Angular</option>
]

スプレッド構文でも配列に変換可

前項でご紹介したサンプルソースでは配列への変換にArray.from()を使用していますが、スプレッド構文でバラバラにして配列にする方法もあります。

const list = document.getElementById('list')
const options = [...list.options]

options.forEach(option => {
    console.log('Label：' + option.label)
    console.log('Value：' + option.value)
    console.log('Selected：' + option.selected)
    console.log('Disabled：' + option.disabled)
});

注意点として、スプレッド構文はES6～の使用できるため、IEでは動作しません。その点ご注意いただければと思います。