присоединение change () даже к слушателям для динамического выбора / раскрытия

Question

Я создаю 3 выпадающих / выбирающих поля на лету и вставляю их в DOM через .innerHTML.

Я не знаю идентификаторов выпадающих, пока я не создал их в javascript.Чтобы узнать, какие раскрывающиеся списки были созданы, я создаю массив, в котором хранятся идентификаторы созданных раскрывающихся списков.

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>";
}

Теперь у меня есть массив с тремя идентификаторами, например:

• dropdown1
• dropdown2
• dropdown3

Что я хочу сделать с помощью 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.

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.