【HTML/JavaScript】プルダウンで表示内容を切り替える

HTML/CSS JavaScript/jQuery Web

プルダウンで表示内容を切り替える

こちら実装にてこづったんですが、結果的にとても簡単な方法で出来ました。

HTML/JavaScriptを使用します。

cssはbootstrap4を使用していますので、今回cssの説明は割愛します。

残念なパターン

まずは残念なパターンをご紹介。

以下の記述でプルダウンを選択すれば呼応した要素を表示切り替えできます...が！！ページをロードするたびに全部の要素が表示され、プルダウンを選択して初めて要素が切り替わります。 とても残念なパターンですね。

残念なパターン

HTML

<div class="col-auto my-1">
    <label for="sample">選択してください</label>
</div>
<div class="col-auto my-1">
    <select class="form-control" id="sample" onchange="viewChange();">
        <option value="select1">one</option>
        <option value="select2">two</option>
        <option value="select3">three</option>
    </select>
</div>
<div class="col-auto my-5">
    <div id="Box1" class="my-5">
        <p>one</p>
    </div>
    <div id="Box2" class="my-5">
        <p>two</p>
    </div>
    <div id="Box3" class="my-5">
        <p>three</p>
    </div>
</div>

JavaScript

function viewChange(){
    if(document.getElementById('sample')){
        id = document.getElementById('sample').value;
        if(id == 'select1'){
            document.getElementById('Box1').style.display = "";
            document.getElementById('Box2').style.display = "none";
            document.getElementById('Box3').style.display = "none";
        }else if(id == 'select2'){
            document.getElementById('Box1').style.display = "none";
            document.getElementById('Box2').style.display = "";
            document.getElementById('Box3').style.display = "none";
        }
        else if(id == 'select3'){
            document.getElementById('Box1').style.display = "none";
            document.getElementById('Box2').style.display = "none";
            document.getElementById('Box3').style.display = "";
        }
    }

window.onload = viewChange;
}

プルダウンで選択された値によってif文で処理を分岐させます。

one（id="select1"）を選択したとき、id="Box1"の要素のスタイルをdisplay: ;にし、id="Box2"とid="Box3"の要素にはdisplay:none;を適用する、というような処理を同じようにそれぞれに書きます。

window.onload = viewChange;は、選択したらページをリロードをするための記述です。

完成版！

ページを表示した初期画面はひとつめだけが表示されてほしいですよね。

成功パターン

実はたったひとつのコードで解決です。初期画面で表示させたくない要素にもともとdisplay:none;を設定するだけ！

HTML

<div class="col-auto my-1">
    <label for="sample">選択してください</label>
</div>
<div class="col-auto my-1">
    <select class="form-control" id="sample" onchange="viewChange();">
        <option value="select1">one</option>
        <option value="select2">two</option>
        <option value="select3">three</option>
    </select>
</div>
<div class="col-auto my-5">
    <div id="Box1" class="my-5">
        <p>one</p>
    </div>
    <div id="Box2" class="my-5" style="display:none;">  // ここ
        <p>two</p>
    </div>
    <div id="Box3" class="my-5" style="display:none;">  // ここ
        <p>three</p>
    </div>
</div>

JavaScript

変更なし

function viewChange(){
    if(document.getElementById('sample')){
        id = document.getElementById('sample').value;
        if(id == 'select1'){
            document.getElementById('Box1').style.display = "";
            document.getElementById('Box2').style.display = "none";
            document.getElementById('Box3').style.display = "none";
        }else if(id == 'select2'){
            document.getElementById('Box1').style.display = "none";
            document.getElementById('Box2').style.display = "";
            document.getElementById('Box3').style.display = "none";
        }
        else if(id == 'select3'){
            document.getElementById('Box1').style.display = "none";
            document.getElementById('Box2').style.display = "none";
            document.getElementById('Box3').style.display = "";
        }
    }

window.onload = viewChange;
}

要素内は何でも記述可

f:id:bonoponz:20200512211012p:plain

このように、tableタグなども問題なく使用できます。

今後も活躍しそうなコード。覚えておきたいですね。