Show groups based on dropdown meunu not working

JavaScript
1

I have the following Html form with Javascript. I want to show certain fields depending on what the user has chosen. Eg. If user select ‘group 1’ from dropdown I want to only show first group with its fields. Similar for selection 2 and 3.

Here is my JSFiddle. It works for Group 1 and 3 but for some reason it doesn’t work for group 2 or family 2 in this case. Can you please help? I really need to get this done. Thank you all!

2

HI,

The other else statements are being run in each time because they don’t meet the criteria.

You don;t need else anyway as you just want to turn on and off depending on what was selected.

e.g.

//Show Family 1
  if (this.value == '1') {
      $("#family1").show();
      $("#family2").hide();
      $("#family3").hide();
  }

// Show Family 1 & 2.
  if (this.value == '2') {
      $("#family1").show();
      $("#family2").show();
      $("#family3").hide();
  }

// Show Family 1, 2 & 3.
  if (this.value == '3') {
      $("#family1").show();
      $("#family2").show();
      $("#family3").show();
  }

Or you could hide all of them each time and just show the ones you want to save code.

e.g.

jQuery(function($) {

    $('#HowManyAttendingParty').on('change', function() {

        $('div[id^="family"]').hide();
        if (this.value == '1') {
            $("#family1").show();
        }
        if (this.value == '2') {
            $("#family1").show();
            $("#family2").show();
        }
        if (this.value == '3') {
            $("#family1").show();
            $("#family2").show();
            $("#family3").show();
        }

    });
});

Or you could just loop through them.

e.g.

jQuery(function($) {
    $('#HowManyAttendingParty').on('change', function() {
        $('div[id^="family"]').hide();
        for (i = 0; i < this.value; i++) {
            $("#family" + (i + 1)).show();
        }
    });
});

In that way you can have as many as you like without extra code.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.