【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"

以上でselectoptionforEachでループすることができます。

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でループする方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍