Javascript 只调用多个select元素的最后一个附加onchange函数

我正在以编程方式创建多个select元素，每个select元素中有多个选项。我希望通过编程方式为每个select元素分配其自己的onchange函数，该函数将提醒我select元素的相应id

$(document).ready(function () {

    // Headers indicate how many select elements I need.
    // In this example, they are only used to initialize a unique select.id
    for (var ndx = 0; ndx < headers.length; ndx++) {
        var header = headers[ndx];
        const rowName = header.innerHTML;
        var select = document.createElement("select");
        var options = ["Contains", "Equals", "Starts with", "More than", "Less than", "Between", "Empty",
            "Doesn't contain", "Doesn't equal", "Doesn't start with", "Is not more than", "Is not between", "Is not empty"];

        select.id = rowName + "-select";
        options.forEach(function(option) {
            var element = document.createElement("option");
            element.value = option;
            element.innerHTML = option;
            select.appendChild(element);
        });
        select.onchange = function () {
            alert("select.id: " + select.id);
        }
    }
}

$（文档）.ready（函数（）{
//标题指示我需要多少select元素。
//在本例中，它们仅用于初始化唯一的select.id
对于（var ndx=0；ndx

---

但是，在更改任何select元素的选项时，警报中只显示最后一个select元素的id。这可能是我不熟悉的javascript引用问题吗？感谢您的帮助。

javascript中的变量被提升到声明它们的函数范围的开头。在实践中，这意味着在每次迭代中，您都将使用新的选择框替换变量select。这意味着所有侦听器都将引用同一个选择变量，该变量在循环结束时将包含对上次创建的选择的引用

解决方案

将侦听器注册包装在IIFE（立即调用的函数表达式）中，将其作为参数传递给select。这样select的值将仅绑定到当前迭代

(function(select) {
    select.onchange = function() {
        alert(select.id);
    }
})(select);

编辑：

实现侦听器的更正确方法是使用传递给它的事件对象：

select.onchange = function(e) {
    alert(e.target.id); //e.target refers to the element that originated the event
}

---

但是我也留下了上面的答案，因为代码中还有一个与提升/范围相关的问题，这是一个非常常见的错误。

您不能使用

这个
而不是
选择
？发生这种情况的原因是因为您每次迭代都更改select.id。
select.id=rowName+“-选择”；
，所以它只输出最后一个。JS闭包确实存储对范围外变量的引用，但它们不会像您现在希望的那样存储旧值。@AP.wow，您是对的！这也解释了为什么只显示最后一个元素的id。谢谢！