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

rogerdpack · Accepted Answer · 2017-01-21 07:29:11Z

70

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, 2017 at 7:29

rogerdpack

67.7k40 gold badges291 silver badges410 bronze badges

answered Oct 27, 2009 at 5:13

o.k.w

25.9k6 gold badges68 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eric Over a year ago

and the handler's first param is the event.

Tarik Waleed Over a year ago

Thanks, This worked for me after lots of struggling with setAttribute("onchange",function(){}

rahul · Accepted Answer · 2009-10-27 04:58:16Z

43

Add

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

setAttribute

or try replacing onChange with onchange

edited Oct 27, 2009 at 4:58

answered Oct 27, 2009 at 4:49

rahul

188k50 gold badges239 silver badges266 bronze badges

3 Comments

user77413 Over a year ago

Thanks! Changing it from "onChange" to "onchange" fixed it.

lucaferrario Over a year ago

some versions of IE are known to have troubles with setAttribute, so the transport_select.onchange = function(){...} approach seems more fail-safe ;)

Tarik Waleed Over a year ago

this gave me an error Uncaught SyntaxError: function statement requires a name

Community · Accepted Answer · 2017-05-23 12:18:09Z

15

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, 2017 at 12:18

CommunityBot

11 silver badge

answered Jul 18, 2014 at 15:44

IgniteCoders

5,0173 gold badges48 silver badges66 bronze badges

1 Comment

Bruno L. Over a year ago

More generally for getting option value or id: select_element.onchange = function(){console.log(this.id + ": " + this.value);};

Patrick Schwarzenecker · Accepted Answer · 2020-10-25 11:26:44Z

11

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

answered Oct 25, 2020 at 11:26

Patrick Schwarzenecker

1191 silver badge3 bronze badges

5 Comments

Maytha8 Over a year ago

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.

Peter Over a year ago

This answer is short and effective.

Alexander McNulty Over a year ago

This was the only answer that worked for me out of the above.

Alexander McNulty Over a year ago

This is even better with yourSelect.setAttribute( "onchange", "yourFunction(this)" );

Heretic Monkey Over a year ago

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.

Daniel Antonio Nuñez Carhuayo · Accepted Answer · 2015-07-03 15:15:08Z

2

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 3, 2015 at 15:15

Daniel Antonio Nuñez Carhuayo

1,9832 gold badges21 silver badges21 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

2 Comments

3 Comments

1 Comment

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related