0

摘要：我已将 id 选择标签的名称传递到一个数组中。我想动态分配每个 Select Item 以在更改时显示所选项目的索引。这被发送到输出 div。只有第三个选择项被动态触发。为什么？

<script language="JavaScript" type="text/javascript">

$(document).ready(function(){

var NameOfSelect=new Array("a","b","c");

for (i=0;i<NameOfSelect.length;i++){

var sel=NameOfSelect[i];
$("#"+NameOfSelect[i]).change(function () {
           var str = "";
           $("#"+sel+" option:selected").each(function () {
            str += $(this).index() + " "+$("#"+sel).attr("id");
                  });
          $("#output").text(str);
       })
        .trigger('change');

}
</script>

的HTML

<select id="a" >
<option value="0a" >0a</option>
<option value="1a"  >1a</option>
<option value="2a" >2a</option>

</select>


<select id="b" >
<option value="0b"  >0b</option>  
<option value="1b" >1b</option>
<option value="2b" >2b</option>
</select>

<select id="c" >
<option value="0c" >0c</option>
<option value="1c" >1c</option>
<option value="2c" >2c</option>

</select>
<div id=output></div>

输出显示只有“C”在更改时被触发。为什么“a”和“b”没有被类似地动态分配？

4

2 回答 2

1

c发生这种情况是因为每次迭代都会重新分配变量。在 for 循环结束时，所有元素都会有一个适当的事件处理程序，但它们将c在其函数体内引用相同的变量。此变量将保存 的最后一个值c，即"c"。

一种解决方案是为您分配的每个函数处理程序在闭包中缓存 的值c，但在这种情况下，最好this在处理程序内部简单地使用来引用事件select所针对的元素change。

$(document).ready(function(){
    var NameOfSelect = ["a", "b", "c"];

    for (var i=0; i < NameOfSelect.length; i++) {
        $("#"+NameOfSelect[i]).change(function () {
            // this refers to the targeted select element
            var select = this;
            var str = "";
            $("option:selected", this).each(function () {
                // this refers to the selected option
                str += $(this).index() + " " + $(select).attr("id");
            });
            $("#output").text(str);
        }).trigger("change");
    }
});

此外，除非您使用s 进行多项选择，否则每个元素select应该只有一个。因此，您可以只使用和使用第一个（也是唯一的） selected 。option:selectedselectfindoption

var str = $("option:selected", this).index() + " " + $(this).attr("id");
$("#output").text(str);
于 2012-06-22T13:19:20.777 回答
1

好的 ol' javascript 关闭问题，我相信。您分配给更改事件的函数引用变量 c，该变量在 for 循环的每次迭代中都会更改并以“c”结尾。相反，将 c 传递给函数：

var c= NameOfSelect[i];
(function (n) {
    $("#"+NameOfSelect[i]).change(function () {
        var str = "";
        $("#"+n+" option:selected").each(function () {
            str += $(this).index() + " "+$("#"+n).attr("id");
        });

        $("#output").text(str);
    }).trigger('change')
})(c);
于 2012-06-22T13:20:42.573 回答