jQuery顯示/隱藏div選擇更改不與JSON填充選項工作

我有一些選項，我將添加到Web窗體並清理HTML有點我使用一些腳本來填充選項的一些選擇框。我需要根據選擇的內容顯示/隱藏某些div，並且它對於具有硬編碼HTML選項的選擇之一正確工作。但是，對於通過腳本和一些JSON填充的其他下拉菜單，它不會顯示或隱藏更改中的div。任何人看到我做錯了什麼？jQuery顯示/隱藏div選擇更改不與JSON填充選項工作

JS Fiddle

如果你選擇成員+1客人那麼一個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'); 
});

來源

2014-02-17 isaac weathers

你的選擇元素選擇是錯誤的更改事件處理程序，this指選擇元素被改爲使用該元素而不是使用另一個選擇器

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

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

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

來源

2014-02-17 03:39:24

現在我明白了。謝謝Arun。 –

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

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

DEMO

或

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

DEMO

來源

2014-02-17 03:42:14 Unknown

您的演示工作。謝謝你。 –

在你的代碼只是改變

ŧ他行：

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

要：

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

來源

2014-02-17 03:52:52

jQuery顯示/隱藏div選擇更改不與JSON填充選項工作

回答

相關問題