JavaScript Array.from() メソッドでセレクトボックスのoptionをforEachでループする

2023年1月20日

環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122

書式
1.select要素をidで取得します
const 変数名1 =document.getElementById('セレクトボックスのID名’)

2.セレクトボックスのoption要素を取得します。
const　変数名2 =変数名1.options;

3.セレクトボックスのoption要素をループします
Array.from(変数名2).forEach(function(引数){処理コード});

使用例

<!DOCTYPE html>
<html>
<body>
  都市名： 
 <select id="city" name="city" >
        <option value="tokyo" selected>東京</option>
        <option value="oosaka">大阪</option>
        <option value="fukuoka" disabled>福岡</option>
  </select>

<script>
//select要素をidで取得
const city = document.getElementById('city');
//option要素を取得
const cft = city.options;

//HTMLCollectionを配列に変換してループ
Array.from(cft).forEach(function(e) {
    //option要素のラベル
    console.log('ラベル：' + e.label) 
    //option要素の値
    console.log('要素の値：' + e.value)
    //option要素の選択状態
     console.log('選択状態：' + e.selected)
    //option要素の有効無効状態
    console.log('無効状態：' + e.disabled)
});
</script>

</body>
</html>

実行結果
ラベル：東京
要素の値：tokyo
選択状態：true
無効状態：false
ラベル：大阪
要素の値：oosaka
選択状態：false
無効状態：false
ラベル：福岡
要素の値：fukuoka
選択状態：false
無効状態：true

JavaScript

Posted by arkgame