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

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

Edible Oils
Vegetable Cooking Fats

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