July 31, 2021

How to Trigger Select Change Event in Javascript

By Krishnaa JavaScript Questions 0 Comments

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 the div 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 with script 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) using document.querySelector() method and stored them in btn, select, and status variables.

We have attached change event listener to the select element. Inside event handler function, we are simply setting the inner text of h1 element to display the value of the currently selected option.
The goal of this tutorial is to trigger change event of select element programmatically. We are going to do this on click of button element. Just for that reason, we have attached click event listener to the button element.
In the click event handler function, we are setting the value of select element to “marks” which is one of the options in the dropdown list and calling triggerChange() method by passing select element as parameter.

In triggerChange() method, we are creating change event using Event constructor and dispatching it to the select element using dispatchEvent() 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);
}

You May Also Like: