Filter Category Select Drop down based on Another drop down option
jquery
Solution
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
Problem
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