总结:我已将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”没有被动态分配?
答案 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);