Hide / Show selection options based on another selection option in jQuery

Question

A similar question was asked with an excellent answer here: jQuery disable SELECT parameters based on the selected radio (need support for all browsers)

I would like to know how to change the code to use a select box instead of radio buttons.

Answer 1

the modified plugin is: jQuery.fn.filterOn = function(selection, values) { return this.each(function() { var select = this; var options = []; $(select).find('option').each(function() { options.push({value: $(this).val(), text: $(this).text()}); }); $(select).data('options', options); $(selection).change(function(){ $(selection + " option:selected").each(function(){ var options = $(select).empty().data('options'); var haystack = values[$(this).attr('id')]; $.each(options, function(i){ var option = options[i]; if($.inArray(option.value, haystack) !== -1) { $(select).append( $('<option>').text(option.text).val(option.value) ); } }); }); }); }); }; $(function() { $('#theOptions').filterOn('#dropDown', { 'abc': ['a','b','c'], '123': ['1','2','3'] }); }); 

and HTML example:

 <select id="dropDown"> <option value="abc" id="abc" >ABC</option> <option value="123" id="123">123</option> </select> <select id="theOptions"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> </select> 

For completeness, here is a demo