将 change() 事件侦听器附加到动态选择/下拉列表

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 的数组：

• 下拉菜单1
• 下拉菜单2
• 下拉菜单3

我想用 Javascript（不使用 jQuery 或其他框架）完成的是循环这 3 个下拉菜单并为它们附加一个更改事件侦听器。

当用户在其中一个下拉菜单中更改选择时，我想调用一个名为 updatePrice 的函数。

我有点卡在动态添加事件监听器上。

Answer 1

现在您已经直接添加了代码，您可以忽略我的冗长回答！！！

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

此处的工作示例 -> http://jsfiddle.net/MStgq/2/

Answer 2

你已经得到了数组？然后你可以这样做：

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 3

这不适用于跨浏览器。
你会想要像

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

在 jquery 中。