Filter Category Select Drop down based on Another drop down option

Question

I want to filter the list of options based on the selection of another drop down.

Please see the jquery code below; i am sure there is a tiny bit that i am missing that's why it is not working.

if($('#selectionone').is(':selected')){
    $('option').filter('.edibles');   

}
if($('selectiontwo').is(':selected')){
  $('option').filter('.vegfats');
}

Here is the jsfiddle link

Answer 1

Here is my approach of adding/removing options based on the options selected and this will work in most of browsers.

I have modified the html by adding class to first select options like

<option class="edibles" value="Edible Oils" id="selectionone">Edible Oils</option>
<option class="vegfats" value="Vegetable Cooking Fats" id="selectiontwo">Vegetable Cooking Fats</option>

JS:

$(document).ready(function () {    
    var allOptions = $('#selectprod option')
    $('#selectcat').change(function () {
        $('#selectprod option').remove(); //remove all options
        var classN = $('#selectcat option:selected').prop('class'); //get the 
        var opts = allOptions.filter('.' + classN); //selected option's classname
        $.each(opts, function (i, j) {
            $(j).appendTo('#selectprod'); //append those options back
        });
    });
});

JSFiddle

Answer 2

This is a simple approach to the issue, which should be rather solid:

<select class="masterSelect">
    <option value="0">Fiat</option>
    <option value="1">Opel</option>
    <option value="2">Porsche</option>
</select>

<div class="hiddenOptions">
    <select>
        <option value="1">Punto</option>
        <option value="2">Mani</option>
        <option value="3">Pierri 203</option>
    </select>

    <select>
        <option value="4">Elysis</option>
        <option value="5">201</option>
        <option value="6">Mido</option>
    </select>

    <select>
        <option value="7">911</option>
        <option value="8">Macho</option>
        <option value="9">Vanguard</option>
    </select>
</div>

css:

.hiddenOptions > select
{
   display: none;
}

.hiddenOptions > select.active
{
   display: inline-block;
}

JS:

$('.masterSelect').on('change', function() {
    $('.hiddenOptions select').removeClass("active");
    $('.hiddenOptions select').eq($(this).val()).addClass("active");

    showValue();
});

$('.hiddenOptions select').on('change', function() {
    showValue();
});

$('.masterSelect').trigger('change'); //set initial value on load

function showValue()
{
    console.log($('.hiddenOptions select.active').val());
}

https://jsfiddle.net/g5h2k6t4/1/