Question

I’m creating 3 dropdowns/select boxes on the fly and insert them in the DOM through .innerHTML.

I don’t know the ID’s of the dropdowns until I created them in Javascript.
To know which dropdowns have been created, I create an array where I store the ID’s of the dropdowns I have created.

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

Now I have an array with 3 id’s like:

• dropdown1
• dropdown2
• dropdown3

What I want to accomplish with Javascript (without using jQuery or another framework) is to loop over these 3 dropdowns and attach a change event listener to them.

When a user changes the selection in one of these dropdown, I want to call a function called updatePrice for example.

I’m a bit stuck on the dynamic adding of event listeners here.

Answer 1

Now you have added your code its straight forward and you can ignore my verbose answer !!!

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

could become :

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

This will call the updatePrice function, passing the select list that changed

However

IMO its far better (from a performance point of view for a start) to create elements in the DOM using the 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

Working example here -> http://jsfiddle.net/MStgq/2/