Zenn
🤖

selectタグで選択をするたびに新しいselectタグが出現する

2025/01/12に公開
HTML
JavaScript
tech

いま、オリプロを作っているんですが。その中に投稿フォームがあります。
投稿フォームの中にはselectタグがあり、選択するたびに新しいselectタグが出現するようにしています。
備忘録として残します。

動作の流れ
動作としてはselectタグで値を選択するとselectタグが作成されるという流れになります。

まず、htmlです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <select name="" id="select1" class="">
            <option value="">選択してください</option>
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
    </div>
    <script src="main.js"></script>
</body>
</html>

containerクラスの中にselectが入っている状態です。

selectタグの作成

まず、selectタグを作成するコードをJavaScript書いていきます。ファイル名はmain.jsです。

let selectCount = 1; //何番目のselectか判別するための変数です

const newSelect = document.createElement('select');

selectCount++;
const idName = `select${selectCount}`; //付与するidとnameを作成
newSelect.id = idName; //作成したselectにidを付与
newSelect.name = idName; //作成したselectにnameを付与

// 選択肢を追加
newSelect.innerHTML = `
    <option value="">選択してください</option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
`;

// 作成したselectタグをdivに追加
document.querySelector('.container').appendChild(newSelect);

とりあえず上記のjsコードでselectを作成できます。

selectタグを選択した時にselectタグを作成する

function handleSelectChange(event) {
    const selectedId = event.target.id; //クリックしたidを取得
    const recentId = `select${selectCount}` //直近のidを取得

    if (event.target.value !== "" && recentId == selectedId) { // 値が選択された場合なおかつ選択したselectタグが直近のもののみ
        //ここでselectタグを作成する
    }
}

このようにしてタグを作成していきます
タグを作成するコードを関数化していきます

function createNewSelect() {
    const newSelect = document.createElement('select');
    
    selectCount++;
    const idName = `select${selectCount}`; //付与するidとnameを作成
    newSelect.id = idName; //作成したselectにidを付与
    newSelect.name = idName; //作成したselectにnameを付与
    
    // 選択肢を追加
    newSelect.innerHTML = `
        <option value="">選択してください</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
}

if (event.target.value !== "" && recentId == selectedId) { // 値が選択された場合なおかつ選択したselectタグが直近のもののみ
        createNewSelect();

これでselectタグの値を選択した時のみ新しいselectタグを作成するコードができました。
最後に最初から存在する1番目のselectタグに対して、値を選択した時にselectタグを作成するように設定していきます。

const initialSelect = document.getElementById('select1'); //id='select1'を取得
initialSelect.addEventListener('change', handleSelectChange); //取得したものに値を選択した時にselectタグを作成を設定

これでselectタグの値を選択したときに新しいselectタグが作成されます。

Discussion