Adding Bootstrap Fields based on drop-down selection

Question

I have a drop-down where I'm listing the number of users based on a number selection. So let's say that they pick '7' users from the list, it will show two extra text boxes and so on.

Here is the code:



  

 
    Number of Attendees:
    
 
 
 
   Names of Attendees:

I have my jQuery set to where it's supposed to show/hide the text fields based on the number selection but it's not working for me - All help would be appreciated.

user_9780149 · Answer

Jerdine Sabio's answer works but if you want to write it in a more elegant way then you can do this in your switch statement:
Instead of:

// Use switch for cleaner code
    switch (selectValue) {
      case "five":
        $('.five').show();
      case "six":
        $('.five').show();
        $('.six').show();
        break;
      case "seven":
        $('.five').show();
        $('.six').show();
        $('.seven').show();
        break;
      case "eight":
        $('.five').show();
        $('.six').show();
        $('.seven').show();
        $('.eight').show();
        break;
      case "nine":
        $('.five').show();
        $('.six').show();
        $('.seven').show();
        $('.eight').show();
        $('.nine').show();
        break;
      case "ten":
        $('.five').show();
        $('.six').show();
        $('.seven').show();
        $('.eight').show();
        $('.nine').show();
        $('.ten').show();
        break;
    }

Leave out breaks and use fall-through:

switch (value) {
    case "ten":
        $('.ten').show();
    case "nine":
        $('.nine').show();
    case "eight":
        $('.eight').show()
    case "seven":
        $('.seven').show();
    case "six":
        $('.six').show();
    case "five":
        $('.five').show();
}

This means that if you select ten then the switch statement will execute all code which is under the case for ten.

user_5640737 · Answer

the first thing I noticed is the incorrect jquery selector. You could select an element by its ID with $("#ID") .

The .each is not necessary also, you could access the value property of the selected object via $("#ID").val() .

It looks more appropriate to use switch case instead of multiple If statements as you have many conditions there.

Do run the snippet, thanks! edit: Placed Csaba's switch case script, it's neater!

jQuery(document).ready(function($) {

  // Moved this to the top, this would hide the elements when the page is ready
  $('.six').hide();
  $('.seven').hide();
  $('.eight').hide();
  $('.nine').hide();
  $('.ten').hide();

  /* $('select[name=totalUsers]') is incorrect for this
example because the totalUsers is the ID. The correct way of selecting through ID is $("#totalUsers")*/
  $("#totalUsers").change(function() {

    // Hide them again, because some of them are shown at the end
    $('.six').hide();
    $('.seven').hide();
    $('.eight').hide();
    $('.nine').hide();
    $('.ten').hide();

    // Loop is not necessary, just get the value from the select field.
    var selectValue = $(this).val();

    // Use switch for cleaner code
    switch (selectValue) {
        case "ten":
          $('.ten').show();
        case "nine":
          $('.nine').show();
        case "eight":
          $('.eight').show()
        case "seven":
          $('.seven').show();
        case "six":
          $('.six').show();
        case "five":
          $('.five').show();
      }
    
  });
});

label {
  display: block;
}

select,
input {
  margin-bottom: 20px;
}




  
    

      
        Number of Attendees:
        
        
      

      
        Names of Attendees:

Adding Bootstrap Fields based on drop-down selection

2 Answers