How to get the selected value in dropdown list using JavaScript

In this quick post we will be covering how to get the selected value in dropdown list using JavaScript so you can solve this issue quickly and without having to look any further!

As with all my Quick Fix Series of posts, you will first find the problem described and then the solution just below.

Let’s get stuck in!

The Problem - Getting a selected value from a dropdown list using JavaScript.

When we talk about dropdown lists in HTML and JavaScript, a standard way to go about this is with the select and option elements.

There is another option which is not as well known which is called a datalist which supports the dropdown list as well.

In this post we will be focusing on getting the selected value from a select element rather than a datalist element.

So let’s take a look at the HTML for our dropdown list:

<select id="example-dropdown">
  <option value="A">a</option>
  <option value="B">b</option>
</select>

As you can see we have a few different elements here, we have the parent select element and the chil option elements.

What we need to do is now add in some JavaScript to be able to get the selected value from this select element.

It is worth noting that it is going to be in vanilla JS which just means plain JavaScript with no additional libraries.

The solution - How to get the selected value in dropdown list using JavaScript

To be able to access the selected value from the above example, we can do it in a few different ways but the main principle of getting the selected value is that we need to focus on getting the value from the select element and not the option elements.

Even though the option element is where the selected attribute gets added, the parent select element contains all the information we need as the value attribute.

This means that all we need to do in order to get the selected value in the dropdown list using JavaScript is to query that element and then get the value attribute.

Here is the example we will be using:

<select id="example-dropdown">
  <option value="A">a</option>
  <option value="B">b</option>
</select>

For this example let’s assume that option B has been selected.

Here is how we can get the selected dropdown value using document.querySelector:

const dropdownElement = document.querySelector("#example-dropdown")
dropdownElement.value // selected value (B in this example)

Here is an example with document.getElementById:

const dropdownElement = document.getElementById("example-dropdown")
dropdownElement.value // selected value (B in this example)

Here is one last example with document.getElementsByTagName:

const dropdownElement = document.getElementsByTagName("select")[0]
dropdownElement.value // selected value (B in this example)

It is worth noting that if you want to get the text of the selected option in the dropdown with JavaScript then we will need to get the index of the selected value rather than the value itself.

const dropdownElement = document.querySelector("#example-dropdown")
dropdownElement.options[dropdownElement.selectedIndex].text // b

Generally speaking you shouldn’t need to do this and instead it would be easier and simpler to get the value from the array or object that was used to populate the select options in the first place.

For example:

const options = {
  A: {
    text: "a",
    value: "A",
  },
  B: {
    text: "b",
    value: "B",
  },
}

const dropdownElement = document.querySelector("#example-dropdown")
options[dropdownElement.value].text // b

Summary

There we have the quick fix to how to get the selected value in dropdown list using JavaScript, if you want more like this be sure to check out some of my other posts!