Jquery 多个元素的一个更改事件，运行函数一次

HTML

<label>
  <select id="foo">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</label>

<label>
  <select id="bar">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</label>

<label>
  <select id="foobar">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</label>

问题 当运行上述命令时，我得到了

uncaughtrangeerror：超出了我理解的最大调用堆栈大小，因为更改事件无限期重复

如何避免这种情况？
对于这些元素，我有通用的
Change
代码，它们都需要在最后运行相同的函数，但只有在触发了所有
Change
事件之后。
注意：
.trigger（“change”）
是必需的，我将代码过于简化了


编辑
添加了与我的代码更相似的代码。
使用一个，而不是一个，如下所示

$(document).one("change", "#foo, #bar", function(){
    $("#bar").val($("#foo").val()).trigger("change");
  /* Do something for #foo & #bar*/

  /* Run this when all changes are done */
    console.log("done");
})

使用一个而不是一个，如下所示

$(document).one("change", "#foo, #bar", function(){
    $("#bar").val($("#foo").val()).trigger("change");
  /* Do something for #foo & #bar*/

  /* Run this when all changes are done */
    console.log("done");
})

个人认为，我会考虑使用JavaScript请求框架（）。这有点骗人，但可以让你在不锁定浏览器的情况下无限地检查

我甚至认为把Tangalangja的答案与这一部分结合起来。例如（将“一”替换为“开”）

这是一个未经测试的想法，但可能对你有用。
 < P>个人，我会考虑使用JavaScript请求ReavigasdFrand（）。这有点骗人，但可以让你在不锁定浏览器的情况下无限地检查

我甚至认为把Tangalangja的答案与这一部分结合起来。例如（将“一”替换为“开”）

这是一个未经测试的想法，但可能对您有用。
由于您正在通过ajax获取新选项，我建议将字段名和值这样传递给此函数。您需要更改字段名，但这应该是有意义的

onChange=“menuChange（'fieldname'，this.value）”

只是把它放在图像中：

组，首先填充，没有其他内容，当组更改时，使用组的值更新类，当类更改时，使用类的值更新类别

由于您要通过ajax获取新选项，我建议将字段名和值像这样传递给此函数。您需要更改字段名，但这应该是有意义的

onChange=“menuChange（'fieldname'，this.value）”

只是把它放在图像中：

组，首先填充，没有其他内容，当组更改时，使用组的值更新类，当类更改时，使用类的值更新类别

为什么更改事件会无限期重复？它是循环的吗？还是递归函数？@AdamCopley-由于
change
绑定到
#foo
和
#bar
，因此在
#bar
上调用
触发器（“change”）
会重新启动
change
事件。@这是单向的吗<当
foo
发生变化时，条码会发生变化，但是否会发生相反的情况？我的意思是，如果
foo
发生了变化？@RejithRKrishnan-这是一个方向。这将是我的下一个问题^^，它可能不需要同时绑定到这两个方向？例如，如果更改发生在链中<代码>foo.change->bar.change->baz.change

。然后，您将拥有每个单击条件，而不是绑定在同一个单击函数中。为什么更改事件会无限期重复？它是循环的吗？还是递归函数？@AdamCopley-由于

change

绑定到

#foo

和

#bar

，因此在

#bar

上调用

触发器（“change”）

会重新启动

change

事件。@这是单向的吗<当

foo

发生变化时，条码会发生变化，但是否会发生相反的情况？我的意思是，如果

foo

发生了变化？@RejithRKrishnan-这是一个方向。这将是我的下一个问题^^，它可能不需要同时绑定到这两个方向？例如，如果更改发生在链中<代码>foo.change->bar.change->baz.change。然后你会有一个点击条件，而不是被绑定在同一个点击功能中。我需要更改事件运行多次。我需要更改事件运行多次。这是一个黑客攻击，可能会奏效，但必须有一个“正常”的方法来解决此问题。同意，这有点不合常规。我也很想知道是否有一种正常的方法，如果没有的话就没有多大意义。这是一种黑客行为，可能会奏效，但必须有一种“正常”的方法来解决这种问题。同意，这有点非传统。我还想看看是否有正常的方法，如果没有，就没有多大意义。感谢您的尝试，但我看不出这有什么帮助。数据加载很好，并且位于与此不同的处理程序中。这只是一个UI问题，而不是获取数据的问题。这与数据无关，而是js函数只清除链中下一个选择框的值。使用ajax获取数据这一事实有助于提高js函数的可用性。我将删除php，因为它并不相关。当一个更改调用另一个更改时，使用您的方法仍然会产生相同的问题。您能否进一步解释一下您的选择框的期望行为，您说它们是在一个链中发生的，但这是按顺序进行的

onChange（1）->change2，onChange（2）->change3

或

onChange（1）->change2，change3，change4

感谢您的尝试，但我看不出这有什么帮助。数据加载良好，并且位于与此不同的处理程序中。这只是一个UI问题，而不是获取数据的问题。这与数据无关，而是js函数只清除链中下一个选择框的值。使用ajax获取数据这一事实有助于提高js函数的可用性。我将删除php，因为它并不相关。当一个更改调用另一个更改时，使用您的方法仍然会产生相同的问题。您能否进一步解释一下您的选择框的期望行为，您说它们是在一个链中发生的，但这是按顺序进行的<代码>更改（1）->change2，更改（2）->change3或

onChange（1）->change2，更改
function check_changes(){
  $(document).on("change", "#foo, #bar", function(){
    $("#bar").val($("#foo").val()).trigger("change");
    * Do something for #foo & #bar*/

    /* Run this when all changes are done */
    console.log("done");
  })
}

requestAnimationFrame(check_changes);

function menuChange(field, value){


    switch(field){

        case "class":
        document.getElementById("class").options.length = 0;
        document.getElementById("category").options.length = 1;
        document.getElementById("subcategory").options.length = 1;
        break;

        case "category":
        document.getElementById("category").options.length = 0;
        document.getElementById("subcategory").options.length = 1;
        break;

        case "subcategory":
        document.getElementById("subcategory").options.length = 0;
        break;

    }
    document.getElementById(field).options.length = 0;

    $.ajax({
        url: "ajaxrequest.php",
        type: "post",
        data: { field: field,
              value: value },
        success: function (response) {

           console.log(response);
           document.getElementById(field).innerHTML = response;               

        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }


    });



}