How to Get the Selected Value from a Dropdown List in JavaScript: A Complete Guide

Stop Guessing: How to Get the Selected Value from a Dropdown in JavaScript

Have you ever encountered a situation where a user selects something in a dropdown list on a website, but your program just can't "see" it? Sounds familiar, right? This is one of the most common questions on Stack Overflow (and for good reason!), asked by thousands of beginner and even experienced developers. It seems simple, doesn't it? But there are nuances, and today we'll break them down once and for all.

In this article, I'll show you not one, but several ways to get the selected value from a dropdown in pure JavaScript. You'll learn how value differs from selectedIndex, how to handle the selection event, and how to avoid the pitfall with multi-select. Let's go!

The Simplest Way: The value Property

Imagine you have a regular HTML select:

<select id="city">\n  <option value="moscow">Moscow</option>\n  <option value="spb">Saint Petersburg</option>\n  <option value="kazan">Kazan</option>\n</select>

To get the selected value, we need to do just two things:

\n
1. Find the <select> element in the DOM.
\n
2. Read its value property.
\n

Here's what it looks like in code:

const selectElement = document.getElementById('city');\nconst selectedValue = selectElement.value;\n\nconsole.log(selectedValue); // Will output, for example, "spb"

Important! The value property of the <select> element automatically returns the value attribute of the currently selected <option>. This is the simplest and recommended way if you need the value, not the text.

What if you need the text of the selected item?

Sometimes we need not the value, but what the user sees (for example, "Moscow" instead of "moscow"). For this, there is the textContent (or innerText) property of the selected option. But first, you need to get the option itself:

const selectElement = document.getElementById('city');\nconst selectedOption = selectElement.options[selectElement.selectedIndex];\nconst selectedText = selectedOption.textContent;\n\nconsole.log(selectedText); // Will output "Moscow"

Here we use selectedIndex — this is the index of the selected element (starting from 0). Then we access the options collection and get the desired element.

How to React to Selection Changes in Real Time?

Just getting the value once is fine, but more often you need to do something when the user changes the selection. For this, we use the change event:

const selectElement = document.getElementById('city');\n\nselectElement.addEventListener('change', function() {\n  const selectedValue = selectElement.value;\n  const selectedText = selectElement.options[selectElement.selectedIndex].textContent;\n  \n  console.log('Selected value:', selectedValue);\n  console.log('Selected text:', selectedText);\n});

Now, every time the user changes the city in the dropdown list, we instantly get the updated data. Convenient, isn't it?

Special Case: Multi-Selects (multiple select)

But what if you have a dropdown list with multiple selection? For example:

<select id="skills" multiple>\n  <option value="html">HTML</option>\n  <option value="css">CSS</option>\n  <option value="js">JavaScript</option>\n</select>

In this case, selectElement.value will return only the first selected value, not all of them. To get all selected items, you need to iterate through the options collection:

const selectElement = document.getEl