How to Get the Selected Value from a Dropdown in JavaScript

By the end of this page, you will understand how to read the selected value from a <select> dropdown in JavaScript, how to access the selected option's text, when to use value versus selectedIndex, and how this works in real applications such as forms, filters, and settings panels.

A dropdown in HTML is usually created with the <select> element, which contains one or more <option> elements. When a user picks an option, JavaScript can read the current selection.

The most common way to get the selected value is:

const dropdown = document.getElementById('ddlViewBy');
const selectedValue = dropdown.value;

The value property of a <select> returns the value of the currently selected <option>.

This matters because dropdowns are used everywhere in programming:

• choosing a category
• selecting a country
• filtering products
• changing application settings
• picking sort order

JavaScript often reads dropdown values in order to:

• send data to a server
• update the page dynamically
• validate form input
• control application behavior

You can also access more details about the selection, such as:

• the selected option's text
• the selected index position
• multiple selected options in a multi-select dropdown

For a normal single-select dropdown, select.value is usually the simplest and best choice.

Think of a dropdown like a labeled stack of choices where exactly one card is visible at a time.

• The <select> is the container holding all the cards.
• Each <option> is one card.
• The selected card is the one currently facing up.
• JavaScript asks the dropdown, "Which card is currently selected?"

If you ask for .value, you get the hidden machine-friendly value. If you ask for the selected option's text, you get the human-readable label.

Example:

• Visible text: test2
• Value: 2

Applications usually use the value, because it is more stable and easier to process in code.

Basic syntax

const dropdown = document.getElementById('ddlViewBy');
const selectedValue = dropdown.value;

Example: get the selected value

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected>test2</option>
  <option value="3">test3</option>
</select>

<script>
  const dropdown = document.getElementById('ddlViewBy');
  console.log(dropdown.value); // "2"
</script>

Consider this example:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected>test2</option>
  <option value="3">test3</option>
</select>

<script>
  const dropdown = document.getElementById('ddlViewBy');
  const value = dropdown.value;
  console.log(value);
</script>

Step by step:

1. The browser creates the <select> element and its three <option> elements.

2. The second option has selected, so it becomes the current selection.

Dropdown values are often used in real applications such as:

Filtering data

A product page may let users choose a category:

• Electronics
• Clothing
• Books

JavaScript reads the selected value and filters the displayed items.

Sorting results

A dropdown can control sort order:

• price ascending
• price descending
• newest first

The selected value tells the script which sorting rule to apply.

Form submission

A registration form might include a country or role dropdown. JavaScript can validate that the user selected a valid option before submitting.

Settings panels

Applications often use dropdowns for preferences like:

• language
• theme
• time zone

The selected value is saved and used later.

API requests

A dashboard might send the selected value as a query parameter:

const status = dropdown.value;
fetch(`/api/tasks?status=${status}`);

This lets the backend return the correct filtered data.

In real projects, developers usually do more than just read the value once.

Common pattern: read on change

const dropdown = document.getElementById('ddlViewBy');

dropdown.addEventListener('change', () => {
  const selectedValue = dropdown.value;
  updatePage(selectedValue);
});

This keeps the UI synchronized with user actions.

Guard clause for missing elements

const dropdown = document.getElementById('ddlViewBy');

if (!dropdown) {
  console.error('Dropdown not found');
} else {
  console.log(dropdown.value);
}

This avoids runtime errors when the element is missing.

Validation pattern

if (dropdown.value === '') {
  alert();
}

1. Reading the text when you actually need the value

Broken expectation:

const dropdown = document.getElementById('ddlViewBy');
console.log(dropdown.options[dropdown.selectedIndex].text); // returns "test2"

If your program expects "2", this is the wrong property.

Use:

console.log(dropdown.value); // "2"

2. Forgetting to wait until the element exists

Broken code:

const dropdown = document.getElementById('ddlViewBy');
console.log(dropdown.value);

If this script runs before the HTML is loaded, dropdown may be null.

Safer approaches:

value vs selectedIndex

const dropdown = document.getElementById('ddlViewBy');

Get selected value:

dropdown.value

Get selected text:

dropdown.options[dropdown.selectedIndex].text

Get selected index:

dropdown.selectedIndex

Get selected option element:

dropdown.options[dropdown.selectedIndex]

Listen for changes:

dropdown.addEventListener('change', () => {
  console.log(dropdown.value);
});

Important notes:

• dropdown.value returns a string.
• selectedIndex is zero-based.

How do I get the selected value of a dropdown in JavaScript?

Use the value property:

const value = document.getElementById('ddlViewBy').value;

How do I get the selected text instead of the value?

Use the selected option:

const dropdown = document.getElementById('ddlViewBy');
const text = dropdown.options[dropdown.selectedIndex].text;

Why does a dropdown value return a string?

HTML option values are read as strings by default, even if they look like numbers.

What is the difference between value and selectedIndex?

• value gives the selected option's stored value.
• selectedIndex gives the position of the selected option.

How do I run code when the user changes the dropdown?

Attach a change event listener:

• DOM selection methods — Used to find elements with getElementById or querySelector.
• HTML forms — Dropdowns are common form controls.
• JavaScript events — The change event is important when reacting to user input.
• Input validation — Dropdown values are often checked before form submission.
• Event listeners — A common way to connect dropdown changes to application logic.
• HTML option elements — Understanding <option> helps explain text, value, and selection.
• Type conversion — Dropdown values are strings, so conversion may be needed.
• Form submission with JavaScript — Selected values are often sent to servers or APIs.