【JavaScript】同じデータを使用する複数のセレクトボックスで重複選択を防止する

2025年3月20日

同じデータを使って、複数のセレクトボックスからユーザーにそれぞれ選択して貰う場合。

例えば、第１希望・第２希望・第３希望を選んでもらうというような感じです。

そんな時に、第１希望で選択した値が第２希望では選択できなくなっていると、ユーザーは使いやすいのではないかと。

それを実現するための、JavaScriptです。

Contents

1. まずはフォームを用意する
2. 重複選択を防ぐJavaScript
3. JavaScriptの動作の内容
4. UI改善のひと手間

まずはフォームを用意する

まずはセレクトボックスを必要なだけ用意します。

実装はWordPressで行ったので、詳しい作り方は過去の記事をご覧いただければと。

【WordPress】カスタムフィールドの値からセレクトボックスを作る

同じ名前のカスタムフィールドでも入力する値は異なります。たぶん。・カスタムフィールドの値を絞り ...

https://pirock-oq.info/post-74/

カスタムフィールドの値でのセレクトボックスの作り方ですが。

投稿データを利用してつくるのは基本的には変わりません。

重複選択を防ぐJavaScript

最初にJavaScript部分の全文を載せてしまいますね。

//ページが読み込まれたらセレクトボックスの情報を取得する
document.addEventListener('DOMContentLoaded', function() {
    const selects = document.querySelectorAll('.yourfun-select');
    
    // 選択された値を追跡する関数
    function updateSelections(changedSelect) {
        const selectedValues = Array.from(selects).map(select => select.value);
        
        // 各セレクトボックスの選択肢を更新
        selects.forEach((select, index) => {
            if (select !== changedSelect) {
                Array.from(select.options).forEach(option => {
                    if (option.value === '') return; // 初期値は無視
                    
                    // 他のセレクトボックスで選択されている値は無効化
                    if (selectedValues.includes(option.value) && option.value !== select.value) {
                        option.disabled = true;
                    } else {
                        option.disabled = false;
                    }
                });
            }
        });
    }
    
    // 初期状態の更新
    updateSelections();
    
    // 変更イベントのリスナーを追加
    selects.forEach(select => {
        select.addEventListener('change', function() {
            updateSelections(this);
        });
    });
});

二行目の「.yourfun-select」部分を、JavaScriptを適用したいセレクトボックスのクラス名に変更すれば、動作すると思います。

少し実装を急いだコードなので、他の環境でテストはできてないのですが。

今のところ特に問題は起きてないので、大丈夫でしょう！

外部のJSファイルを作成したり、<script></script>で囲って直書きすれば使えます。