【JavaScript】配列からセレクトボックスを生成する

本記事では、JavaScriptで配列からセレクトボックスを生成する方法をご紹介しています。

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

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

select要素とoption要素を生成する

配列からセレクトボックスを生成します。select要素とoption要素を生成し、body要素の末尾に追加します。

JavaScript

const array = ['リンゴ', 'ゴリラ', 'ラッパ', 'パセリ'];
const select = document.createElement('select');

array.forEach((element)=>{
    
    // option要素を生成
    let option = document.createElement('option');
    
    // option要素のテキストを設定
    option.text = element;
    // option要素の値を設定
    option.value = element;
    
    // 生成したoption要素をselect要素に追加
    select.add(option);
});

// select要素をbody要素の末尾に追加
document.body.appendChild(select);

実行結果

<select>
    <option value="リンゴ">リンゴ</option>
    <option value="ゴリラ">ゴリラ</option>
    <option value="ラッパ">ラッパ</option>
    <option value="パセリ">パセリ</option>
</select>

select要素に生成したoption要素を追加する

前項ではselect要素から生成する方法をご紹介しましたが、本項では設置済みのselect要素を取得し、生成したoption要素を追加します。

HTML

<select name="shiritori"></select>

JavaScript

const array = ['リンゴ', 'ゴリラ', 'ラッパ', 'パセリ'];
const select = document.querySelector('select[name="shiritori"]');

array.forEach((element)=>{
    
    // option要素を生成
    let option = document.createElement('option');
    
    // option要素のテキストを設定
    option.text = element;
    // option要素の値を設定
    option.value = element;
    
    // 生成したoption要素をselect要素に追加
    select.add(option);
});

実行結果

<select name="shiritori">
    <option value="リンゴ">リンゴ</option>
    <option value="ゴリラ">ゴリラ</option>
    <option value="ラッパ">ラッパ</option>
    <option value="パセリ">パセリ</option>
</select>

参考：https://developer.mozilla.org/ja/docs/Web/API/HTMLSelectElement/add

最後に

配列やJSONからセレクトボックスを生成するケースが多々あります。本記事でご紹介した内容はどちらもスタンダードな生成方法となっておりますので、ぜひ覚えておいてくださいね。

以上、JavaScriptで配列からセレクトボックスを生成する方法のご紹介でした！