将change()甚至监听器动态地附加到select/dropdown中

Attaching change() even listeners to select/dropdown dynamically

本文关键字：select dropdown 动态 change 监听器      更新时间：2023-09-26

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

我不知道下拉菜单的ID，直到我在Javascript中创建它们。为了知道已经创建了哪些下拉菜单，我创建了一个数组，其中存储了我创建的下拉菜单的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的函数。

我在动态添加事件侦听器上有点卡住了。

现在你已经添加了你的代码，它是直接的，你可以忽略我冗长的回答!!

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函数，传递已更改的select列表

然而

在我看来，使用DOM在DOM中创建元素要好得多(从性能的角度开始)。

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/

你已经得到数组了吗?然后你可以这样做:

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/

这在不同的浏览器中是行不通的。
你需要像

这样的东西
for(var i = 0; i < list.length; i++)
{
   $("#"+list[i]).change(updatePrice);
}
在jquery

。

相关文章：