複数のセレクトボックスをJavaScriptで連動させる方法

8276 ワード
HTML selectタグ JavaScript jQuery セレクトボックス HTML テキストリンク

まずは以下画像の赤枠部分を見ていただきたいのですが、２つのセレクトボックスを連動させて、左のセレクトボックス（画像では「食材群」）で値を選ぶと、右のセレクトボックス（同「食材」）の選択肢が動的に変更されるような方法を調べました。


例えば、食材群で「野菜類」を選ぶと、食材の選択肢には野菜の仲間が表示されます。


また、食材群で「魚介類」を選ぶと、食材の選択肢には魚介の仲間が表示されます。


この機能は以下のコードで実現できます。

select_change.js
// 食材群選択
$(function(){
    var $children_default = $('.children');
    var original = $children_default.html();

    $('.parent').change(function() {
        var $children = $("#children");
        var val1 = $(this).val();
        $children.html(original).find('option').each(function() {
            var val2 = $(this).data('val');
            if (val1 != val2) {
                $(this).remove();
            }
        });
        if ($(this).val() === '') {
            $children.attr('disabled', 'disabled');
        } else {
            $children.removeAttr('disabled');
        }
    });
});
food_register.html
<form method="post">
    食材群：
    <select class="parent" id="parent" name="parent" required>
        <option value="" selected="selected" disabled>
            食材群を選択して下さい
        <option value="vegetables">野菜</option>
        <option value="seafood">魚介類</option>
    </select>
        食材：
    <select class="children" id="children" name="children" disabled>
        <option value="0" selected="selected" disabled>
            食材群を選択して下さい
        </option>
        <option value="1" data-val="vegetables">キャベツ</option>
        <option value="2" data-val="vegetables">白菜</option>
        <option value="3" data-val="vegetables">レタス</option>
        <option value="4" data-val="seafood">アジ</option>
        <option value="5" data-val="seafood">タイ</option>
        <option value="6" data-val="seafood">マグロ</option>
    </select>
</form>


ちなみに、画像は食品ごとの食材(栄養価)を登録するアプリケーションの一部で、カレーライスの1人分の食材は以下のような分量となります。