セレクトボックスに合わせて表示・非表示させる方法！Javascript初心者の勉強

buttonをクリックしたらJavascriptを発火させるというようなことは慣れてきたけれど、セレクトボックス(selectタグ)とJavascriptの組み合わせで勉強したことがなかったので勉強のためセレクトボックスに合わせて表示・非表示させてみたいと思います。

htmlでのselectタグの書き方

selectタグ自体初めて使うので軽くselectタグの書き方について説明します。
selectタグを使うと以下のようにセレクトボックスが作成され選択肢を選ぶことができます。

Programmer Life

selectタグ 構文

<select id="selbox" onchange="change();">
    <option value="1">Programmer</option>
    <option value="2">Life</option>
</select>

selectタグの入れ子にoptionタグを作成し選択肢を増やしていくことができます。
上記例ではJavascriptで制御するためにonchange属性に発火させたいメソッドを書きIDを設定しています。
またoptionにvalue属性を設けその値を利用して制御しています。

Javascriptで表示・非表示を切り替え

本題の表示・非表示の切り替え方法です。cssのdisplay:noneの機能を使って表示・非表示を行っています。

See the Pen Switch display with select box by Nakamoto (@programmerlife) on CodePen.

Javascript抜粋

JSの記述を見やすいように以下に書いています。少し長く感じますが、表示非表示の項目が多いだけなのでとてもシンプルです。

function change() {
    if (document.getElementById("selbox")) {
        selboxValue = document.getElementById("selbox").value;
        if (selboxValue == "1") {
            //文字1を表示
            document.getElementById("txt1").style.display = "";
            //input1を表示
            document.getElementById("input1").style.display = "";
            //文字2を非表示
            document.getElementById("txt2").style.display = "none";
            //input2を非表示
            document.getElementById("input2").style.display = "none";
        } else if (selboxValue == "2") {
            //文字2を表示
            document.getElementById("txt2").style.display = "";
            //input2を表示
            document.getElementById("input2").style.display = "";
            //文字1を非表示
            document.getElementById("txt1").style.display = "none";
            //input1を非表示
            document.getElementById("input1").style.display = "none";
        }
    }
}

jQueryで表示・非表示を切り替え

練習もかねてidの変わりにname属性を使ってvalueの値を取得してみようとしましたが、Javascriptではnameの場合はformタグもなければ引っ掛けられないようだったのでしかたなくjQueryを使ってみます。

See the Pen Switch display with select box jQuery by Nakamoto (@programmerlife) on CodePen.

pタグにはname属性をつけることができないことを知らなくて地味に時間がかかってしまった。

jQuery抜粋

$("[name=apply_type]").change(function () {
    // 選択されているvalue属性値を取り出す
    let val = $("[name=apply_type]").val();
    if (val == 1) {
        //文字1を表示
        $("#text1").show();
        //input1を表示
        $('input[name="input1"]').show();
        //文字2を非表示
        $("#text2").hide();
        //input2を非表示
        $('input[name="input2"]').hide();
    } else if (val == 2) {
        //文字1を非表示
        $("#text1").hide();
        //input1を非表示
        $('input[name="input1"]').hide();
        //文字2を表示
        $("#text2").show();
        //input2を表示
        $('input[name="input2"]').show();
    }
});

$(“[name=apply_type]”).change(function ()でセレクトボックスが切り替えられるタイミングでメソッドが発火します。
jQueryではhideとshowを使って表示・非表示が切り替えられます。

おわり

簡単にできると思っていても条件が少し変わっただけでわからなくなってしまうので、もっと勉強しないといけないなと感じますが眠い。buttonばかり使ってたのでselectboxがなんだかおしゃれに感じます。

参考

JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト
【jQuery】セレクトボックスの選択要素を抽出