当第一个SELECT被一次又一次地更改时，第二次SELECT获得递增的运行
当第一个SELECT被一次又一次地更改时，第二次SELECT获得递增的运行
提问于 2019-01-08 10:53:23
我有两个select元素。第一个(S1)控制大小写类型。第二个选项(S2)在选择S1的第一个选项(O1)时显示。然后，当选择S1的第二个选项(O2)时，S2将隐藏。为了测试，我让它写到控制台。很简单，是吗？我的工作没有任何问题。
问题是这个..。当我选择S1>O1，然后选择S2>O1一切都很好，如控制台所示。然后我选择S1>O2和S2 hides。这也不出所料。然后我再次选择S1>O1。S2会按预期进行重置和显示。但是当我选择S2>any选项时，控制台显示它已递增，并且多次运行S2的onChange事件。每次我在S1>O1和S1>O2之间切换时，增量都会增加，最终锁定屏幕。
我不知道它为什么要这样做。我可能漏掉了什么。任何帮助都将不胜感激。小提琴在下面。
https://jsfiddle.net/wswilliams/a5qu1km6/
提前谢谢。
$("#fld_Severity").hide();
$("#fld_CaseType").on("change", function() {
if ($("#fld_CaseType").children("option:selected").val() == 26) {
$('#fld_Severity').val('0')
$("#fld_Severity").show();
$("#fld_Severity").on("change", function() {
console.log("Severity looped.");
});
};
if ($("#fld_CaseType").children("option:selected").val() == 30) {
$("#fld_Severity").hide();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="fld_CaseType" name="case_type" data-stop-refresh="true">
<option value="0" selected>Select a case type ...</option>
<option value="26">Case type 1</option>
<option value="30">Case Type 2</option>
</select>
<select id="fld_Severity" name="severity_id" data-stop-refresh="true">
<option value="0">Select a severity ...</option>
<option value="4">Severity 1</option>
<option value="3">Severity 2</option>
</select>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-08 11:09:13
这是因为您的代码每次运行fld_CaseType的change事件时，都会为fld_Severity添加一个额外的事件侦听器。因此，如果您更改fld_CaseType 5次，那么将有5个事件侦听器监听更改，这意味着代码将执行5次(每个事件侦听器一次)。
要解决这个问题，您需要在添加新的事件侦听器之前，使用jquery .off()函数从fld_Severity中删除任何“更改”事件侦听器。
$("#fld_Severity").off("change"); 我已经在下面创建了一个工作代码片段：
$("#fld_Severity").hide();
$("#fld_CaseType").on("change", function() {
if ($("#fld_CaseType").children("option:selected").val() == 26) {
$('#fld_Severity').val('0');
$("#fld_Severity").show();
$("#fld_Severity").off("change"); //remove on change event listener
$("#fld_Severity").on("change", function() {
console.log("Severity looped.");
});
}
if ($("#fld_CaseType").children("option:selected").val() == 30) {
$("#fld_Severity").hide();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="fld_CaseType" name="case_type" data-stop-refresh="true">
<option value="0" selected>Select a case type ...</option>
<option value="26">Case type 1</option>
<option value="30">Case Type 2</option>
</select>
<select id="fld_Severity" name="severity_id" data-stop-refresh="true">
<option value="0">Select a severity ...</option>
<option value="4">Severity 1</option>
<option value="3">Severity 2</option>
</select>
或者，您可以只将事件侦听器代码移到fld_CaseType的change事件之外，这样它就只被调用一次
例如：
$("#fld_Severity").on("change", function() {
console.log("Severity looped.");
});
$("#fld_CaseType").on("change", function() {
if ($("#fld_CaseType").children("option:selected").val() == 26) {
$('#fld_Severity').val('0');
$("#fld_Severity").show();
}
if ($("#fld_CaseType").children("option:selected").val() == 30) {
$("#fld_Severity").hide();
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54084653
复制相关文章
相似问题
腾讯云开发者
