Sentry Answers>JavaScript>

Get Selected Value in Dropdown List Using JavaScript

Get Selected Value in Dropdown List Using JavaScript

Matthew C.

The Problem

You have a dropdown list, for example, the following <select> dropdown list:

Click to Copy
<select name="accommodation" id="accommodation-select"> <option value="">--Please choose an option--</option> <option value="apartment">Apartment</option> <option value="house">House</option> <option value="other">Other</option> </select>

How do you get the selected value using JavaScript?

The Solution

Get the <select> element by using one of the methods on the document interface that returns a DOM Element, such getElementById. You can then get its value using the value property:

Click to Copy
const accommodationSelect = document.getElementById("accommodation-select"); const value = accommodationSelect.value;

You can also add a “change” event listener to the <select> element and get its value each time a different item is selected from the dropdown list:

Click to Copy
const accommodationSelect = document.getElementById("accommodation-select"); accommodationSelect.addEventListener("change", handleSelectChange); function handleSelectChange(event) { const currentValue = event.target.value; console.log(currentValue); }

You can get the selected value from the “change” event’s target property.

  • YoutubeHow Sentry.io saved me from disaster (opens in a new tab)
  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns (opens in a new tab)
  • SentryJavascript Error Monitoring & Tracing (opens in a new tab)
  • ResourcesJavaScript Frontend Error Monitoring 101 (opens in a new tab)
  • Syntax.fmListen to the Syntax Podcast (opens in a new tab)
  • Syntax.fm logo
    Listen to the Syntax Podcast (opens in a new tab)

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 150,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.