[Javascript][jQuery] セレクトボックス メインカテゴリーとサブカテゴリーを連動させる

概要

select要素のセレクトボックスで階層化されたメインカテゴリーを選択すると
関連したサブカテゴリーに表示を連動させる。

①サブカテゴリーの初期表示は未選択状態を示すoption要素のみを表示

②メインカテゴリーで項目を選択する

③サブカテゴリーは連動した未選択状態項目と連動した項目のみが表示される

コード

■html

<div class="col-md-4">
    <select id="maincategory" name="maincategory">
        <option value="">----------------------------------</option>
        <option value="1">肉</option>
        <option value="2">野菜</option>
        <option value="3">魚</option>
    </select>
</div>
<div class="col-md-4">
    <select id="subcategory" name="subcategory">
        <option value="" data-category="">----------------------------------</option>
        <option value="a" data-category="1">牛</option>
        <option value="b" data-category="1">豚</option>
        <option value="c" data-category="1">鳥</option>
        <option value="aa" data-category="2">トマト</option>
        <option value="bb" data-category="2">キャベツ</option>
        <option value="cc" data-category="2">にんじん</option>
        <option value="aaa" data-category="3">マグロ</option>
        <option value="bbb" data-category="3">サーモン</option>
        <option value="ccc" data-category="3">サバ</option>
    </select>
</div>

■Javascript

<script>
document.addEventListener("DOMContentLoaded", function(){
    // 初期値が設定されている場合は最上位を選択させない
    var firstChange = ($("#subcategory").val() == "");

    $("#maincategory").on("change",function(){
        if(firstChange){
            // 最上位を選択（現在選択項目を解除）
            $("#subcategory option[value='']").prop('selected',true);
        }
        firstChange = true;

        $("#subcategory option").hide();
        $("#subcategory option[data-category='']").show();
        $("#subcategory option[data-category=" + this.value + "]").show();
    }).change();
});
</script>

メインカテゴリーのvalueをカスタムデータ属性に設定して
一旦全部非表示にし、関連するoption要素のみを表示してます。

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発