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

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

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

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

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では動作しません。その点ご注意いただければと思います。

最後に

select要素を取得してoptionをループする処理は、optionの選択によって処理を分岐したり、選択された値によってページ遷移したりと使用することが多い処理になります。ざっと内容を覚えてもらって制作に活かしていただければ幸いです。

以上、JavaScriptでセレクトボックスのoptionをforEachでループする方法のご紹介でした！