使用Array作为动态JQuery字符串变量名称

时间:2012-06-22 13:10:25

标签: jquery arrays variables select dynamic

总结:我已将id select标记的名称传递给Array。我想动态分配每个选择项目以在更改时显示所选项目的索引。这将发送到输出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”没有被动态分配?

2 个答案:

答案 0 :(得分:1)

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

一种解决方案是将c的值缓存到您指定的每个函数处理程序的闭包中,但在这种情况下,只需在处理程序中使用this来引用{ {1}}事件定位的{1}}元素。

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"); } }); 元素应该只有一个select。因此,您可以使用option:selected并使用第一个(也是唯一的)选定的select

find

答案 1 :(得分:1)

好的'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);