여러 개의 선택 상자를 JavaScript로 연동하는 방법

우선은 이하 화상의 빨간색 프레임 부분을 보고 싶습니다만, 2개의 셀렉트 박스를 연동시켜, 왼쪽의 셀렉트 박스(화상에서는 「식재군」)로 값을 선택하면, 오른쪽의 셀렉트 박스(동 「식재」) 선택이 동적으로 변경되는 방법을 조사했습니다.


예를 들어, 식재료군에서 「야채류」를 선택하면, 식재료의 선택지에는 야채의 동료가 표시됩니다.


또, 식재료군에서 「어패류」를 선택하면, 식재료의 선택지에는 해산물의 동료가 표시됩니다.


이 기능은 다음 코드로 구현할 수 있습니다.

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인분의 재료는 이하와 같은 분량이 됩니다.