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

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

本記事では、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