セレクトで条件分岐するやつ

by kachibito

HTML

<form class="cascadeTest">
    <select class='parent' name='parent' size='10'>
        <option value='1'>cat 1 -></option>
        <option value='2'>cat 2 -></option>
        <option value='3'>cat 3 -></option>
        <option value='4'>cat 4 -></option>
    </select>
    <select class='child' id='child' size='10'>
        <option class='sub_1' value='5'>sub-cat 1.1</option>
        <option class='sub_1' value='3'>sub-cat 1.2</option>
        <option class='sub_2' value='4'>sub-cat 2.1</option>
        <option class='sub_2' value='4'>sub-cat 2.2</option>
        <option class='sub_2' value='3'>sub-cat 2.3</option>
        <option class='sub_3' value='6'>sub-cat 3.1</option>
        <option class='sub_4' value='6'>sub-cat 4.1</option>
        <option class='sub_4' value='6'>sub-cat 4.2</option>
        <option class='sub_4' value='6'>sub-cat 4.3</option>
       
    </select>
</form>

JavaScript

function cascadeSelect(parent, child, childVal) {
        
        var childOptions = child.find('option:not(.static)');
        child.data('options', childOptions);

        parent.change(function () {
            childOptions.remove();
            child.append(child.data('options').filter('.sub_' + this.value)).change();
        })

        if (childVal != '') {
            child.find("option[value=" + childVal + "]").attr("selected", "selected");
        }
    }

    $(function () {
        cascadeForm = $('.cascadeTest');
        parentSelect = cascadeForm.find('.parent');
        childSelect = cascadeForm.find('.child');

        cascadeSelect(parentSelect, childSelect, "5");
    });