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 t

Answer 1

You could do it this way:

$(document).ready(function () {
    $('#selectcat').change(function () {
        $('#selectprod option').show();
        if ($('option:selected', this).attr('id') == 'selectionone') {
            $('#selectprod option.edibles').hide();
        }
        if ($('option:selected', this).attr('id') == 'selectiontwo') {
            $('#selectprod option.vegfats').hide();
        }
    });
});

jsFiddle example

As this may not work in older versions of IE, you can replace $('#selectprod option').show(); with $('#selectprod option').prop('disabled',false); and $('#selectprod option.vegfats').hide(); with $('#selectprod option.vegfats').prop('disabled',true);

Answer 2

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 3

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/

Answer 4

Include these two links along with the code given by Praveen

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>