How to execute change event on select when option change?

Question

How can I execute the onchange event handler on select when I change the option?

document.getElementById('selct').value=2;

<select id="selct" onchange="alert('change success')">
  <option value="0">val1</option>
  <option value="1">val2</option>
  <option value="2">val3</option>
  <option value="3">val4</option>
  <option value="4">val5</option>
  <option value="5">val6</option>
</select>

When I do that, the result is val3, but select's onchange didn't work. How can I fix it?

The event is only triggered when the user changes it, not when you change it from JavaScript. — Barmar, Mar 19 '19 at 08:01
Possible duplicate of [How do I programmatically force an onchange event on an input?](https://stackoverflow.com/questions/136617/how-do-i-programmatically-force-an-onchange-event-on-an-input) — Michel, Mar 19 '19 at 08:08

Pranav C Balan · Answer 1 · 2019-03-19T14:28:26.700

1

Changing value programmatically using Javascript doesn't fire change event. To make it work you have to fire the event programmatically.

var sel = document.getElementById('selct');
sel.value=2;
sel.onchange();

var sel = document.getElementById('selct');
sel.value = 2;
sel.onchange();

<select id="selct" onchange="alert('change success')">
  <option value="0">val1</option>
  <option value="1">val2</option>
  <option value="2">val3</option>
  <option value="3">val4</option>
  <option value="4">val5</option>
  <option value="5">val6</option>
</select>

From MDN docs, change events for select tag fires when:

When the user commits the change explicitly (e.g. by selecting a value from a 's dropdown with a mouse click, by selecting a date from a date picker for , by selecting a file in the file picker for , etc.);

Refer : How can I trigger an onchange event manually?

edited Mar 19 '19 at 14:28

answered Mar 19 '19 at 08:01

Pranav C Balan

110,383
23
155
178

i already try it but did not work i got this eroor ====document.getElementById(...).onchange is not a function – danial Mar 19 '19 at 08:05
get the same eroor sel.onchange is not a function :( – danial Mar 19 '19 at 08:10
@danial check console.log(sel) – Pranav C Balan Mar 19 '19 at 08:42

score 0 · Answer 2 · answered Apr 15 '19 at 21:24

0

This work for me:

document.getElementById('selct').dispatchEvent(new Event('change'));

answered Apr 15 '19 at 21:24

Daniel De León

12,505
5
78
69

How to execute change event on select when option change?

2 Answers2