Skip to main content

How to Get the Value and Text of a Select (Dropdown) on Change in JavaScript

When a user interacts with a <select> dropdown menu, you often need to capture both the value of the selected <option> and its visible text. This is essential for triggering actions, updating the UI, or sending the correct data in a form.

This guide will teach you the modern and standard methods for getting the selected option's value and text every time the user makes a new selection.

The Core Event: The change Event​

The change event is the key to making a <select> element interactive. It fires whenever the user selects a different option. The standard approach is to add an event listener to the <select> element to handle this event.

We'll use this simple dropdown for our examples.

<select id="my-select">
  <option value="">--Choose an option--</option>
  <option value="horse">Horse 🐴</option>
  <option value="wolf">Wolf 🐺</option>
  <option value="fox">Fox 🦊</option>
</select>

Basic Setup:

const selectElement = document.getElementById('my-select');

selectElement.addEventListener('change', (event) => {
  // Our logic will go here
});

Goal 1: Get the Value of the Selected Option​

The value of an <option> is the data that is typically sent to a server. Getting the value of the currently selected option is very straightforward.

For example, we want to get the value attribute of the option the user just selected.

The Recommended Solution consists of accessing the value property directly on the <select> element itself (or event.target) inside the change event listener.

const selectElement = document.getElementById('my-select');

selectElement.addEventListener('change', (event) => {
  // `event.target` is the <select> element.
  const selectedValue = event.target.value;
  
  console.log('Selected Value:', selectedValue);
});

Now, when a user selects "Wolf 🐺", the console will log Selected Value: wolf.

Goal 2: Get the Text of the Selected Option​

Sometimes you need the visible text of the option (e.g., "Horse 🐴"), not just its underlying value.

For example, we want to get the user-facing text from the selected option.

The recommended solution is as follows

  • To get the text, you must first find the currently selected <option> element and then read its text or textContent property. - The select.selectedIndex property gives you the index of the selected option.
const selectElement = document.getElementById('my-select');

selectElement.addEventListener('change', (event) => {
  // Find the selected option element
  const selectedOption = selectElement.options[selectElement.selectedIndex];
  
  // Get its text content
  const selectedText = selectedOption.textContent; // or .text
  
  console.log('Selected Text:', selectedText);
});

Now, when a user selects "Wolf 🐺", the console will log Selected Text: Wolf 🐺.

Putting It All Together: A Reusable Function​

This example combines both concepts into a single, clean event handler.

const selectElement = document.getElementById('my-select');

function handleSelectChange(event) {
  const selectedValue = event.target.value;
  
  // Get the selected option's text
  // event.target.options is a collection of all <option> elements
  const selectedOption = event.target.options[event.target.selectedIndex];
  const selectedText = selectedOption.textContent;

  console.log('--- Selection Changed ---');
  console.log('Value:', selectedValue);
  console.log('Text:', selectedText);
}

selectElement.addEventListener('change', handleSelectChange);

Conclusion​

Getting the value and text from a <select> element on change is a fundamental DOM manipulation task.

  • Always start by adding a change event listener to your <select> element.
  • To get the value, simply read the .value property from the <select> element (e.g., event.target.value).
  • To get the text, you must first find the selected <option> using the .selectedIndex property, and then read its .textContent.

By using these standard properties, you can reliably capture user selections and build interactive forms and UIs.

Table of Contents