javascript - 仅调用多个 select 元素的最后附加的 onchange 函数

Question

我正在以编程方式创建多个选择元素，每个选择元素中包含多个选项。我想以编程方式为每个选择元素分配其自己的 onchange 函数，该函数将提醒我选择元素的相应 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);
        }
    }
}

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

Answer 1

JavaScript 中的变量被提升到声明它们的函数作用域的开头。实际上，这意味着每次迭代时，您都将用新的选择框替换变量选择。这意味着所有监听器将引用相同的选择变量，该变量在循环结束时将包含对最后创建的选择的引用。

解决方案

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

(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
}

但是我也留下了上面的答案，因为代码中还存在与提升/作用域相关的问题，并且这是一个非常常见的错误。