javascript - Use one select to determine which other selects on the form are visible -

i have main category select on form:

<select name ="main_category"> <option value = "maincat1">main cat 1</option> <option value = "maincat2">main cat 2</option> </select> 

dependent on option value selected here make other selects visible/invisible.

i think hard coding array simplest solution deciding selects want shown based on option main_category select.

so:

maincat1_array = 'select1, select2, select3' maincat2_array = 'select2, select4' 

in case if maincat1 selected in main dropdown expect see:

<select1 display=""></select> <select2 display=""></select> <select3 display=""></select> <select4 display="none"></select> 

and if maincat2 selected in main dropdown expect see:

<select1 display="none"></select> <select2 display=""></select> <select3 display="none"></select> <select4 display=""></select> 

i aware there need javascript or jquery involved, total beginner. know want do, cannot work out best way of doing it.

i this:

first, give selects (except #main_category) class can referenced together.

var rules = {     maincat1: ['select1','select2','select3'],     maincat2: ['select2','select4'] }  $('#main_category').change(function(){     var target = $(this).val();     //hide selects first     $('.select-class').hide();     //loop through tags in predefined rules, , show elements     $.each(rules[target], function(index, value) {         $(value).show();     }); });