July 31, 2021
How to Trigger Select Change Event in Javascript
In this tutorial, you will learn how to trigger select change event in javascript. Change event of select
element is automatically triggered when you select a different option from the dropdown list. There are multiple ways to trigger the change event of select
element programmatically in javascript. Some of the methods are outdated and no longer work on modern browsers.
In this tutorial, I will share a method that actually works on all modern browsers without any issue. This method involves the use of Event
constructor. The Event
constructor is extremely helpful if you want to trigger any built-in or custom event in javascript. Please have a look over the code example and steps given below.
HTML:
- We have one
div
element which will act as a wrapper for the rest of the elements. - We are using
style
attribute in thediv
element to make sure all child elements are center-aligned horizontally. - We have one
button
element with inner text “Trigger Change” - We have one
h1
element which will display the value of the selected option. - Finally, we have our
select
element with 4 options. - We have also included our javascript file
script.js
withscript
tag at the bottom.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div style="text-align: center;"> <button>Trigger Change</button> <h1>Status</h1> <select> <option value="james">James</option> <option value="peter">Peter</option> <option value="marks">Marks</option> <option value="alex">Alex</option> </select> </div> <script src="script.js"></script> </body> </html>
Javascript:
- We got references of all 3 elements (
button
,select
,h1
) usingdocument.querySelector()
method and stored them inbtn
,select
, andstatus
variables. - We have attached
change
event listener to theselect
element. Inside event handler function, we are simply setting the inner text ofh1
element to display the value of the currently selected option. - The goal of this tutorial is to trigger
change
event ofselect
element programmatically. We are going to do this on click ofbutton
element. Just for that reason, we have attachedclick
event listener to thebutton
element. - In the
click
event handler function, we are setting the value ofselect
element to “marks” which is one of the options in the dropdown list and callingtriggerChange()
method by passingselect
element as parameter. - In
triggerChange()
method, we are creatingchange
event usingEvent
constructor and dispatching it to theselect
element usingdispatchEvent()
method.
let btn = document.querySelector("button"); let select = document.querySelector("select"); let status = document.querySelector("h1"); select.addEventListener("change", (e) => { status.innerText = select.value }); btn.addEventListener('click', () => { select.value = "marks"; triggerChange(select); }); function triggerChange(element) { let changeEvent = new Event('change'); element.dispatchEvent(changeEvent); }