How to add an onchange event to a select box via javascript?

Question

I've got a script where I am dynamically creating select boxes. When those boxes are created, we want to set the onchange event for the new box to point to a function called toggleSelect() .

I can't seem to get the syntax right to create the onchange event. Can someone tell me what I'm doing wrong? It doesn't throw an error, but doesn't work, either.

  col = dataRow.insertCell(0);
  var transport_select = document.createElement('select');
  transport_select.id = transport_select_id;
  transport_select.options[0] = new Option('LTL', 'LTL');
  transport_select.options[1] = new Option('FTL', 'FTL');
  transport_select.onChange = function(){toggleSelect(transport_select_id);};
  col.appendChild(transport_select);

Answer 1

Here's another way of attaching the event based on W3C DOM Level 2 Events Specification :

  transport_select.addEventListener(
     'change',
     function() { toggleSelect(this.id); },
     false
  );

Answer 2

Add

transport_select.setAttribute("onchange", function(){toggleSelect(transport_select_id);});

setAttribute

or try replacing onChange with onchange

Answer 3

replace:

transport_select.onChange = function(){toggleSelect(transport_select_id);};

with:

transport_select.onchange = function(){toggleSelect(transport_select_id);};

---

on' C 'hange >> on' c 'hange

---

You can use addEventListener too.

Answer 4

yourSelect.setAttribute( "onchange", "yourFunction()" );

Answer 5

If you are using prototype.js then you can do this:

transport_select.observe('change', function(){
  toggleSelect(transport_select_id)
})

This eliminate (as hope) the problem in cross-browsers