how to trigger a change event on a selectwhen changing it's value programmatically

Question

so, using pure Javascript and DOM:

const select = document.querySelector('#my-select')

select.addEventListener('change', function(){
  console.log('changed', this.value)
})

select.value = 'some value from an existing option'
// this changes the select correctly, but it doesn't trigger the event

Is there any way to correctly do this, without jQuery?

force triggering the change event: `select.dispatchEvent(new Event('change'));` as seen on the stack: https://stackoverflow.com/questions/16250464/trigger-change-event-when-the-input-value-changed-programmatically (vanilla JS solution) — GrafiCode, May 27 '19 at 16:42
also useful: https://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually — ludovico, May 27 '19 at 16:48
GrafiCode, can you put it in form of an answer so i can accept it and close this question please? — André Alçada Padez, May 27 '19 at 17:34
Don't worry about that, as a matter of fact I did not answer it — GrafiCode, May 27 '19 at 17:45
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) — ganjim, May 27 '19 at 20:48

score 0 · Answer 1 · answered May 27 '19 at 20:42

0

You can force triggering the change event this way:

select.dispatchEvent(new Event('change'));

answered May 27 '19 at 20:42

GrafiCode

3,307
3
26
31

how to trigger a change event on a selectwhen changing it's value programmatically

1 Answers1