JavaScript Dropdown change Event

The change event runs after the user commits a new selection in a dropdown list. Use it to read the selected value and update the page without putting JavaScript directly in the HTML onchange attribute.

const month = document.getElementById("s1");
const output = document.getElementById("msg3");

month.addEventListener("change", () => {
  output.textContent = month.value;
});

Listen for the change Event Top ↑

The original tutorial used an inline onChange handler. addEventListener() keeps behavior in JavaScript and allows more than one listener.

<select id="s1" name="month">
  <option value="Jan">January</option>
  <option value="Feb">February</option>
  <option value="Mar">March</option>
</select>
<div id="msg3" aria-live="polite"></div>

Read the Option Value or Visible Text Top ↑

const value = month.value;
const text = month.options[month.selectedIndex].text;

The value is the data assigned to the option. The text is what the visitor sees.

Use selectedIndex When the Position Matters Top ↑

selectedIndex returns the position of the selected option. Prefer stable option values for application logic because indexes change when options are inserted or reordered.

Read Multiple Selections Top ↑

A multiple-select needs a different approach because several options may be selected. Continue with multiple listbox selection.

Related Listbox Actions Top ↑

getElementById() · add options · listbox reference · JavaScript validation

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: