WEBページ制作

WEBページ制作の話題に関するフォーラムです。
  • 解決済みのトピックにはコメントできません。
このトピックは解決済みです。
質問

 
(Windows 10 Pro : JavaScript)
ドロップダウンリストAを決定するとドロップBCDの選択肢が決定される仕組み
投稿日時: 20/03/09 14:07:02
投稿者: QooApp

よろしくお願いいたします。
 
目標
4つのドロップダウンリストがあり、
各リスト値は4択abcd
 
・ドロップダウンリストAの値を選択すると、ドロップダウンリストBCDの値が自動的に決まる。
・ドロップダウンリストAの選択肢以外をBCDに表示する。
です。
 
例@
ドロップダウンリストA = a
ドロップダウンリストB = b , c , d
ドロップダウンリストC = b , c , d
ドロップダウンリストD = b , c , d
例A
ドロップダウンリストA = c
ドロップダウンリストB = a , b , d
ドロップダウンリストC = a , b , d
ドロップダウンリストD = a , b , d
 
このようにドロップダウンリストAで選択された選択肢以外の値をBCDの選択肢として表示したい場合、
jsではどのように書けばよろしいでしょうか。
 
今回は規模が小さい為、パワープレイでもなんでもよく、最終的にはhtmlのページのドロップダウンリストが機能すればどんなやり方でも構いません。
 
今現在、if文を使う方法でやるか、switch文くらいしか想像できませんが、規模が大きくなった場合は配列の値をパワープレイで書くのは難しいと思い、専門家の皆様のご知識をご教授願います。

回答
投稿日時: 20/03/30 17:21:26
投稿者: 月

書いてみました。
 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>sample</title>
</head>
<body>
    <form>
        <select class="a"></select>
        <select class="b"></select>
        <select class="c"></select>
        <select class="d"></select>
    </form>
</body>
<script>

(() => {
    const a = document.querySelector('select.a');
    const b = document.querySelector('select.b');
    const c = document.querySelector('select.c');
    const d = document.querySelector('select.d');
    const values = ['a', 'b', 'c', 'd'];
    const resetOptions = (select, except) => {
        select.innerHTML = '';
        values.forEach(v => {
            if (except === v) {
                return;
            }
            const option = document.createElement('option');
            option.text = v;
            select.appendChild(option);
        });
    };

    resetOptions(a);

    a.addEventListener('change', () => {
        const except = a.value;
        resetOptions(b, except);
        resetOptions(c, except);
        resetOptions(d, except);
    });

    var evt = document.createEvent('HTMLEvents');
    evt.initEvent('change', false, true);
    a.dispatchEvent(evt);
})();

</script>
</html>

投稿日時: 20/03/30 17:57:09
投稿者: QooApp

月様、
 
ああああわざわざご丁寧な作例ありがとうございます。
無事に動きました。大変勉強になります。