jQuery show/hide div on select change not working with JSON populated options

Question

I have some options that I am adding to a web form and to clean up the HTML a bit I am using some scripts to populate the options for some of the select boxes. I need to show/hide some divs based on what is selected and it is working correctly for one of the selects that has the hardcoded HTML options. However, for the other dropdown that I am populating via a script and some JSON it is not showing or hiding the div on change. Anyone see what I am doing wrong?

JS Fiddle

if you choose member +1 guest then the one div shows as it should. But the other never shows the other div!

Here is the HTML:

<div id="tickets">
  <label for="group1">Number of Tickets: <span class="req">*</span></label>
  <select class="group1_dropdown" id="group1" name="group1">
   <option value="0">-- Please select --</option>
   <option value="1">Member</option>
   <option value="2">Member + 1 Guest</option>
   <option value="3">Member + 2 Guests</option>
   <option value="4">Member + 3 Guests</option>
  </select>
 <label class="visuallyhidden">Year</label>
 <select id="yearSelectionBox2" class="stringInfoSpacing">
  <option value="0" selected="selected">Year</option>
 </select>
</div>
<div id="payMethod">
  <div class="header"> PAYMENT METHOD </div>
   <div id="payOptions">
    <div id="payInfo">
    <div id="pay0" class="paymentinfo">
    <p>PAYMENT INFO OPTION 1</p>
  </div>
    </div>
  </div>
 </div>
<div id="pay222" class="tacos">
  <p>Years Data</p>
 </div>

Here are the scripts I am using:

 var YearListItems2= "";
for (var i = 0; i < modelYearJsonList2.modelYearTable2.length; i++){
YearListItems2+= "<option value='" + modelYearJsonList2.modelYearTable2[i].modelYearID + "'>" + modelYearJsonList2.modelYearTable2[i].modelYear + "</option>";
  };
    $("#yearSelectionBox2").html(YearListItems2); 
     //The div is not showing/hiding as it should 
     $("#yearSelectionBox2").change(function () {
      var str = "";
      str = parseInt($("select option:selected").val());       
     if(str == 2013)
     $("#pay222").show('slow');
      else
         $("#pay222").hide('fast');
 });
 //This one works as it should
  $("#group1").change(function () {
   var str = "";
  str = parseInt($("select option:selected").val());       
   if(str == 2)
     $("#payMethod").show('slow');
     else
      $("#payMethod").hide('fast');
 });

Answer 1

Your select element selector is wrong in the change event handlers, this refers to the select element that was changed use that to refer to the element instead of using another selector

$("#yearSelectionBox2").change(function () {
    var str = parseInt($(this).val());
    if (str == 2013) {
        $("#pay222").show('slow');
    } else {
        $("#pay222").hide('fast');
    }
});

You have used $("select option:selected") to get the selected value, which will always return the value of the first select element instead of the current one, use $(this).value() instead.

Note: The same mistake is there in the group1 handler also, it is working now because that is the first select in the given page now, when a new select is added before that this will fail.

Answer 2

Your select element selector is wrong. Either you should use $(this) or select element id (becuase id's will be unique).

$("#yearSelectionBox2").change(function () {
    var str = "";
    str = parseInt($(this).val());        
     if(str == 2013)
         $("#pay222").show('slow');
      else
          $("#pay222").hide('fast');
});

DEMO

or

$("#yearSelectionBox2").change(function () {
    var str = "";
    str = parseInt($("select#yearSelectionBox2 option:selected").val());        
     if(str == 2013)
         $("#pay222").show('slow');
      else
          $("#pay222").hide('fast');
});

DEMO

Answer 3

In your code just change

This line :

str = parseInt($("select option:selected").val());

To:

str = parseInt($("select#yearSelectionBox2 option:selected").val());