Show/hide fields depending on select value

Question

I am trying to show and hide a few form fields depending on the value of one of my select fields. I am looking to use arrays to hold what should be shown and what should not

Answer 1

My 2 cents : I needed to show/hide fields depending on many previous select value (not only one).

So I add a parent attribute to div fields like this :

 -- Make a choice --
sub 1
sub 2
sub 3







-- Make a choice --
sub 1 of s1
sub 2 of s1
sub 3 of s1







You are inside s1 sub1

Now the jquery code :

$(document).ready(function() {

 $('select[class=selector]').change(function() { 
    //next div to show
    var selectorActive = $(this).val();
    //div where you are 
    var parentValue = $(this).attr("id");

   //show active div and hide others
    $('div').hide().filter('#' + selectorActive).show();

    while (parentValue!="none") {
      //then show parents of active div
      $('div[id=' + parentValue + ']').show();
      //return the parent of div until "none"
      parentValue = $('div[id=' + parentValue + ']').attr("parent");
     }

 });

// print only the first div at start
 $('div').hide().filter("#view").show();

});

That's works like a charm and you don't need to define maps

I hope this will help