Question

我正在创建3个下拉/选择框，并通过.innerHTML将它们插入到DOM中。

在我用javascript创建它们之前，我不知道下拉列表的ID。要知道创建了哪些下拉列表，我创建了一个数组，用于存储我创建的下拉列表的ID。

for(var i=0; i<course.books.length; i++)
{
  output+="<label for='book_"+course.books[i].id+"'>"+ course.books[i].name +"</label>";
  output+="<select id='variant"+course.books[i].id+"' name='book_"+course.books[i].id+"'>";
  output+="<option value='-'>-- Select one --</option>";
  for(var j=0; j<course.books[i].options.length; j++)
  {
      output+="<option value='"+course.books[i].options[j].id+"'>"+course.books[i].options[j].name+"</option>";
  }
  output+="</select>";
}

现在我有一个包含3个id的数组：

dropdown1
dropdown2
dropdown3

我想用javascript（不使用jquery或其他框架）来实现的是循环遍历这3个下拉列表并将更改事件监听器附加到它们。

当用户更改其中一个下拉列表中的选择时，我想调用一个名为“updatePrice”的函数。

我在这里动态添加事件监听器有点困惑，非常感谢任何帮助！

Answer 1

你已经有阵列吗？然后你可以这样做：

function updatePrice()
{
     alert(this.id + " - " + this.selectedIndex);   
}

var list = ["dropdown1", "dropdown2"];
for(var i=0;i<list.length;i++)
{
    document.getElementById(list[i]).onchange = updatePrice;
}

小提琴：http://jsfiddle.net/QkLMT/3/

Answer 2

现在你已经直接添加了你的代码，你可以忽略我的详细答案!!!

output+="<select id='variant"+course.books[i].id+"' name='book_"+course.books[i].id+"'>";

可能会成为：

output+="<select onchange="updatePrice(this)" id='variant"+course.books[i].id+"' name='book_"+course.books[i].id+"'>";

这将调用updatePrice函数，传递更改的选择列表

然而

IMO使用DOM在DOM中创建元素要好得多（from a performance point of view for a start。

var newSelect = document.createElement("select");
newSelect.id = "selectlistid"; //add some attributes
newSelect.onchange = somethingChanged;  // call the somethingChanged function when a change is made

newSelect[newSelect.length] = new Option("One", "1", false, false); // add new option    
document.getElementById('myDiv').appendChild(newSelect); // myDiv is the container to hold the select list

这里的工作示例 - ＆gt; http://jsfiddle.net/MStgq/2/

Answer 3

这不适用于各种浏览器你会想要像

这样的东西

for(var i = 0; i < list.length; i++)
{
   $("#"+list[i]).change(updatePrice);
}

在jquery中。

附加change（）事件侦听器以动态选择/下拉

3 个答案:

然而