javascript - Attaching change() even listeners to selectdropdown dynamically - Stack Overflow

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 acplish 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.

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 acplish 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.

• javascript
• dom-events

Share Improve this question Follow edited Sep 3, 2021 at 13:16 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Dec 8, 2011 at 14:08 JorreJorre 17.6k3333 gold badges103103 silver badges147147 bronze badges 1

• dropdown = select ? please include the code you use to create these "dropdowns" – Manse Commented Dec 8, 2011 at 14:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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 bee :

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/MStgq/2/

You got the array already? Then you can do this:

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

Fiddle: http://jsfiddle/QkLMT/3/

That won't work across browsers.
You'll want something like

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

in jquery.