[英]jQuery show/hide div on select change not working with JSON populated options
我有一些要添加到Web表单中的选项,并且要稍微清理HTML,我使用一些脚本来填充某些选择框的选项。 我需要根据所选内容显示/隐藏一些div,并且对于具有硬编码HTML选项的所选内容之一,它可以正常工作。 但是,对于我通过脚本和一些JSON填充的其他下拉列表,它在更改时未显示或隐藏div。 有人看到我在做什么错吗?
如果您选择成员+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');
});
您的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
处理程序中也存在相同的错误,它现在正在工作,因为这是给定页面中的第一个选择,在此之前添加新选择将失败。
您的选择元素选择器错误。 您应该使用$(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');
});
在您的代码中更改
这行:
str = parseInt($("select option:selected").val());
至:
str = parseInt($("select#yearSelectionBox2 option:selected").val());
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.