jQuery在選擇更改上顯示/隱藏div不適用於JSON填充的選項

Question

我有一些要添加到Web表單中的選項，並且要稍微清理HTML，我使用一些腳本來填充某些選擇框的選項。 我需要根據所選內容顯示/隱藏一些div，並且對於具有硬編碼HTML選項的所選內容之一，它可以正常工作。 但是，對於我通過腳本和一些JSON填充的其他下拉列表，它在更改時未顯示或隱藏div。 有人看到我在做什么錯嗎？

JS小提琴

如果您選擇成員+1來賓，則一個div將顯示為應該。 但是另一個永遠不會顯示另一個div！

這是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>

這是我正在使用的腳本：

 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

您的select元素選擇器在change事件處理程序中是錯誤的， this是指已更改的select元素使用它來引用該元素，而不是使用另一個選擇器

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

您已經使用$("select option:selected")來獲取選定的值，該值將始終返回第一個select元素的值，而不是當前元素的值，請使用$(this).value() 。

注意： group1處理程序中也存在相同的錯誤，它現在正在工作，因為這是給定頁面中的第一個選擇，在此之前添加新選擇將失敗。

Answer 2

您的選擇元素選擇器錯誤。 您應該使用$(this)或select element id （因為ID將是唯一的）。

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

演示

要么

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

演示

Answer 3

在您的代碼中更改

這行：

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

至：

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