JavaScriptで内容が変化するプルダウンメニューを実装する

概要

複数のプルダウンメニューがある状況で選択した結果によって次のプルダウンメニューの内容が変更する実装例を紹介します。
今回の例では、大学と学部の2つのプルダウンメニューがあり、大学を選択するとその大学の学部のみが選択肢になります。

環境

• Laravel 9

前提条件

データベース

データベースにはすでに学校の情報が入っているとします。
今回はわかりやすいようにaに属する学部であればaaとなるようにしています。

universitiesテーブル

id	name
1	a
2	b
3	c
4	d

facultiesテーブル

id	university_id	name
1	1	aa
2	1	ab
3	2	ba
4	2	bb
5	3	ca
6	3	cb
7	4	da
8	4	db

コントローラー

コントローラーからviewに対してデータベースの値を渡してください

public function pulldown()
{
    return view('pulldown')->with(['universities' => University::all(), 'faculties' => Faculties::all()]);
}

実装

<!-- 大学情報の入力欄 -->
<select id="university">
    <option value="">大学を選択してください</option>
    @foreach($universities as $university)
     <option value="{{ $university->id }}">{{ $university->name }}</option>
    @endforeach
</select>

<select id="faculty">
    <option value="">学部を選択してください</option>
    @foreach($faculties as $faculty)
    <option value="{{ $faculty->id }}">{{ $faculty->name }}</option>
    @endforeach
</select>

<script>
    const faculties = @json($faculties); // コレクションをjsonに変換
    const facultySelector = document.getElementById("faculty"); // 学部のセレクトタグ

    // universityのselectタグのonChangeイベントに関数を設定
    document.getElementById("university").onchange = e => {
        let selectedValue = e.target.value;
        facultySelector.options.length = 0; // 学部の選択肢を一旦削除
        
        // 「学部を選択してください」を選択時のリセット処理
        if(selectedValue == "") {
            var op = document.createElement("option");
            op.text = "学部を選択してください";
            facultySelector.appendChild(op);
                
            faculties.forEach(faculty => {
                var op = document.createElement("option");
                op.value = faculty.id;
                op.text = faculty.name;
                facultySelector.appendChild(op);
            });
            return;
        }
        
        var op = document.createElement("option");
        op.text = "学部を選択してください";
        facultySelector.appendChild(op);

        // 選択された大学のidでフィルタリングした後にメソッドチェーンでオプションタグの作成を行う
        faculties.filter(faculty => {
            return faculty.university_id == selectedValue;
        }).forEach(faculty => {
            var op = document.createElement("option");
            op.value = faculty.id
            op.text = faculty.name
            facultySelector.appendChild(op)
        });
    }
</script>

実行結果

未選択状態

未選択時

大学選択後

選択後

まとめ

Laravel環境でJavaScriptを用いて動的に変化するドロップダウンメニューを実装することができました。学部を選択後に学科をするような場合でもJSのコードを複製することで複数の動的なプルダウンメニューも実装できます。また、今回未選択時はすべての選択肢がでるようにしていますが、初期状態では選択肢が表示されないといった仕様でもいいのかなと思います。