Question

我有两个select元素。第一个（S1）控制案例类型。当选择S1的第一个选项（O1）时，显示第二个（S2）。然后，当选择S1的第二个选项（O2）时，S2隐藏。为了进行测试，我将其写入控制台。简单吗？我的工作没问题。

问题是……当我选择S1> O1，然后选择S2> O1时，一切正常，如控制台所示。然后选择S1> O2，然后选择S2皮革。这也符合预期。然后我再次选择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>

Answer 1

之所以发生这种情况，是因为每次您的代码为fld_CaseType运行change事件时，它都会为fld_Severity添加一个附加的事件侦听器。因此，如果您将fld_CaseType更改了5次，则将有5个事件侦听器侦听更改，这意味着代码将执行5次（每个事件侦听器一次）。

要解决此问题，您需要先使用jquery .off()函数从fld_Severity中删除所有'change'事件侦听器，然后再添加新的事件侦听器。

$("#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();
    }
});

一遍又一遍地更改第二个SELECT时，第二个SELECT的运行就越来越多

1 个答案: