选择时的 Javascript 动态 onChange 事件

Question

我有这个 javascript 片段：

var selectName["id1","id2","id3"];
setOnClickSelect = function (prefix, selectName) {
        for(var i=0; i<selectName.length; i++) {
            var selId = selectName[i];
            alert(selId);
            $(selId).onchange = function() {
                $(selId).value = $(selId).options[$(selId).selectedIndex].text;
            }
        }
    }

但是当我更改 id1 元素的值时，警报总是给我写“id3”。 我可以修复它吗？

编辑： 我用这些语句更改了我的代码片段：

setOnChangeSelect = function (prefix, selectName) {
        for(var i=0; i<selectName.length; i++) {
            var selId = selectName[i];
            $(selId).onchange = (function (thisId) {
                return function() {
                    $(selId).value = $(thisId).options[$(thisId).selectedIndex].text;
                }
            })(selId);
        }
    }

但 selId 始终是最后一个元素。

Answer 1

这是由 javaScript Closure 的行为引起的，selId 已在循环结束时设置为 selectName[2] ，这就是您返回“id3”的原因。

修复如下，关键是将回调函数包装在另一个函数中以创建另一个闭包。

var selectName = ["id1","id2","id3"];

var setOnClickSelect = function (prefix, selectName) {
        for(var i = 0; i < selectName.length; i++) {
            var selId = selectName[i];
            $(selId).onchange = (function (thisId) {
              return function() {
                $(thisId).value = $(thisId).options[$(thisId).selectedIndex].text;
              }
            })(selId);
        }
    };

PS：var selectName["id1","id2","id3"]存在语法错误，您应该使用var selectName = ["id1","id2","id3 “];