Jquery Depending On The First Dropdown Display/sort A Second Dropdown?

I have Two Dropdowns, The First one lists values like [--All--, Group1, Group2, Group3, etc] and the second one initially should list all values by default. If we select Group 1 fr

Solution 1:

You may try something like this (using data-)

HTML:

<selectid="groups"><optionvalue='--All--'>--All--</option><optionvalue='Group1'>Group1</option><optionvalue='Group2'>Group2</option><optionvalue='Group3'>Group3</option></select><selectid="sub_groups"><optiondata-group='all'value='0'>--Select--</option><optiondata-group='Group1'value='one'>one</option><optiondata-group='Group1'value='two'>two</option><optiondata-group='Group2'value='three'>three</option><optiondata-group='Group2'value='four'>four</option><optiondata-group='Group3'value='five'>five</option><optiondata-group='Group3'value='Six'>six</option><select>

JS:

$('#groups').on('change', function(){
    var val = $(this).val();
    var sub = $('#sub_groups');
    if(val == '--All--') {
        $('#sub_groups').find('option').show();
    }
    else {
        sub.find('option').not(':first').hide();
        $('option', sub).filter(function(){
            if($(this).attr('data-group') == val){
                $(this).show();
            }
        });
    }
    sub.val(0);
});