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

score 55 · Answer 1 · edited Jan 21 '17 at 07:29

55

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

edited Jan 21 '17 at 07:29

rogerdpack

56,766
33
241
361

answered Oct 27 '09 at 05:13

o.k.w

24,849
6
63
62

rahul · Accepted Answer · 2009-10-27T04:58:16.033

37

Add

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

setAttribute

or try replacing onChange with onchange

edited Oct 27 '09 at 04:58

answered Oct 27 '09 at 04:49

rahul

179,909
49
229
260

4

Thanks! Changing it from "onChange" to "onchange" fixed it. – user77413 Oct 27 '09 at 05:03
1

some versions of IE are known to have troubles with setAttribute, so the transport_select.onchange = function(){...} approach seems more fail-safe ;) – lucaferrario Nov 21 '12 at 19:26

score 14 · Answer 3 · edited May 23 '17 at 12:18

14

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.

edited May 23 '17 at 12:18

Community

1
1

answered Jul 18 '14 at 15:44

IgniteCoders

4,126
3
40
58

More generally for getting option value or id: `select_element.onchange = function(){console.log(this.id + ": " + this.value);};` – Bruno L. Jun 05 '21 at 14:46

score 8 · Answer 4 · answered Oct 25 '20 at 11:26

8

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

answered Oct 25 '20 at 11:26

Patrick S.

89
1
2

2

Hello and welcome to SO! You need to describe your answer. Also, you need to answer the question itself. user77413 is asking 'How to add an onchange event to a select box via javascript?' and also asks in their post 'Can someone tell me what I'm doing wrong?'. You need to address these in your answer. – Maytha8 Oct 25 '20 at 12:36
1

This answer is short and effective. – Peter Apr 20 '21 at 11:11
This was the only answer that worked for me out of the above. – Alexander McNulty Aug 06 '21 at 07:08
This is even better with `yourSelect.setAttribute( "onchange", "yourFunction(this)" );` – Alexander McNulty Aug 06 '21 at 07:31
2

It was 2020, well past time to put binding events with HTML attributes to bed, along with table-based layouts and answers with no text. Use `addEventListener` to separate behavior from structure and allow for more than one event listener per event and element. – Heretic Monkey Mar 24 '22 at 15:58

score 1 · Answer 5 · answered Jul 03 '15 at 15:15

1

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

answered Jul 03 '15 at 15:15

Daniel Antonio Nuñez Carhuayo

1,721
2
20
20

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

5 Answers5

Linked