Document

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.

• 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.

         
Trigger Change 
Status
 James Peter Marks Alex  
  

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

Источник

HTMLElement: change event

The change event is fired for , , and elements when the user modifies the element’s value. Unlike the input event, the change event is not necessarily fired for each alteration to an element’s value .

Depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment:

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("change", (event) => >); onchange = (event) => >; 

Event type

Examples

element

HTML

label> Choose an ice cream flavor: select class="ice-cream" name="ice-cream"> option value="">Select One …option> option value="chocolate">Chocolateoption> option value="sardine">Sardineoption> option value="vanilla">Vanillaoption> select> label> div class="result">div> 

body  display: grid; grid-template-areas: "select result"; > select  grid-area: select; > .result  grid-area: result; > 

JavaScript

const selectElement = document.querySelector(".ice-cream"); const result = document.querySelector(".result"); selectElement.addEventListener("change", (event) =>  result.textContent = `You like $event.target.value>`; >); 

Result

Text input element

For some elements, including , the change event doesn’t fire until the control loses focus. Try entering something into the field below, and then click somewhere else to trigger the event.

HTML

input placeholder="Enter some text" name="name" /> p id="log">p> 

JavaScript

const input = document.querySelector("input"); const log = document.getElementById("log"); input.addEventListener("change", updateValue); function updateValue(e)  log.textContent = e.target.value; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Different browsers do not always agree whether a change event should be fired for certain types of interaction. For example, keyboard navigation in elements used to never fire a change event in Gecko until the user hit Enter or switched the focus away from the (see Firefox bug 126379). Since Firefox 63 (Quantum), this behavior is consistent between all major browsers, however.

Found a content problem with this page?

This page was last modified on Apr 24, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Javascript select change events

Last updated: Jan 12, 2023
Reading time · 3 min

# Get the Value/Text of Select or Dropdown on Change

To get the value and text of a select element on change:

1. Add a change event listener to the select element.
2. Use the value property to get the value of the element, e.g. select.value .
3. Use the text property to get the text of the element, e.g. select.options[select.selectedIndex].text .

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> select id="select" style="font-size: 3rem"> option value="">--Choose an option--option> option value="horse">Horse 🐴option> option value="wolf">Wolf 🐺option> option value="fox">Fox 🦊option> select> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const select = document.getElementById('select'); select.addEventListener('change', function handleChange(event)  console.log(event.target.value); // 👉️ get selected VALUE // 👇️ get selected VALUE even outside event handler console.log(select.options[select.selectedIndex].value); // 👇️ get selected TEXT in or outside event handler console.log(select.options[select.selectedIndex].text); >); 

We added a change event listener to the select element.

We used the target property on the event object. The target property is a reference to the object (element) on which the event was dispatched.

In the example, the event.target property points to the select element, because that is the element on which the event was dispatched.

# Read or set the value of a select element

The value property allows us to read or set the value of the select element.

Copied! 
const select = document.getElementById('select'); // ✅ Read value console.log(select.value); // 👉️ "" // ✅ Set value select.value = 'fox'; console.log(select.value); // 👉️ "fox" 

When setting the value of a select element, make sure to set it to one of the values of the option elements.

The options property on the select element returns an array-like object that contains all of the options of the select element.

Copied! 
const select = document.getElementById('select'); console.log(select.options); // 👉️ [option, option, option, option] select.addEventListener('change', function handleChange(event)  console.log(select.options); // 👉️ [option, option, option, option] >); 

# Get the index of the currently selected option element

We can use the selectedIndex property to get the index of the currently selected option .

Copied! 
const select = document.getElementById('select'); console.log(select.selectedIndex); select.addEventListener('change', function handleChange(event)  console.log(select.selectedIndex); >); 

Initially it is set to 0 , but if you console.log the selectedIndex in the handleChange function and change the selected element, you will see the index change.

# Get the text and value of the selected option using the index

The selectedIndex property can be used to get the index of the currently selected option element. The index can be used to get the element’s value and text .

Copied! 
const select = document.getElementById('select'); select.addEventListener('change', function handleChange(event)  // 👇️ get selected VALUE even outside event handler console.log(select.options[select.selectedIndex].value); // 👇️ get selected TEXT in or outside event handler console.log(select.options[select.selectedIndex].text); >); 

This approach can be used both inside and outside of an event handler function.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

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.

• 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.

         
Trigger Change 
Status
 James Peter Marks Alex  
  

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

Источник