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>

This reads the selected option and prints its value.

Example: get the selected text

<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 selectedText = dropdown.options[dropdown.selectedIndex].text;
  console.log(selectedText); // "test2"
</script>

Use this when you need the text shown to the user instead of the underlying value.

Example: react when the selection changes

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

<script>
  const dropdown = document.getElementById('ddlViewBy');

  dropdown.addEventListener('change', function () {
    console.log('Selected value:', dropdown.value);
  });
</script>

This is common in interactive pages where the UI updates after the user chooses a new option.

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.

3. document.getElementById('ddlViewBy') finds the dropdown element.

4. dropdown.value reads the value of the selected option.

5. Since the selected option is:

   <option value="2" selected>test2</option>
   

   the result is:

   "2"
   

6. console.log(value) prints 2 in the console.

If the user later changes the dropdown to test3, then dropdown.value will return "3".

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('Please select an option');
}

This is useful when the first option is a placeholder like Select one.

Mapping values to behavior

const actions = {
  '1': () => console.log('Load test1 data'),
  '2': () => console.log('Load test2 data'),
  '3': () => console.log('Load test3 data')
};

const selectedValue = dropdown.value;
if (actions[selectedValue]) {
  actions[selectedValue]();
}

This pattern is cleaner than writing many if statements.

Reading text and value together

const option = dropdown.options[dropdown.selectedIndex];
console.log(option.value);
console.log(option.text);

This is useful when you need both display text and stored value.

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:

<script>
  window.addEventListener('DOMContentLoaded', () => {
    const dropdown = document.getElementById('ddlViewBy');
    console.log(dropdown.value);
  });
</script>

Or place the script below the HTML.

3. Using selectedIndex without checking what it means

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

This gives the position of the selected option, not its value.

For the second option, the index is 1, not 2.

4. Confusing strings and numbers

const value = dropdown.value;
console.log(typeof value); // "string"

Even if the option value looks numeric, it is returned as a string.

Convert it if needed:

const numericValue = Number(dropdown.value);

5. Accessing the wrong element ID

Broken code:

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

This causes an error because the element is not found.

Always make sure the ID in JavaScript matches the HTML exactly.

value vs selectedIndex

• Use value when your logic depends on the option's stored value.
• Use selectedIndex when you care about the option's position.

value vs option text

• Use value for program logic, API calls, and form data.
• Use text for display messages, labels, and UI feedback.

Example:

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

console.log(value); // "2"
console.log(text);  // "test2"

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.
• The visible text is different from the underlying value.
• Make sure the element exists before reading from it.
• For a normal single-select dropdown, dropdown.value is usually enough.

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:

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

Can I get the selected value without using an ID?

Yes, you can select the element in other ways, such as:

const dropdown = document.querySelector('select');
console.log(dropdown.value);

What if no option is selected?

In a normal single-select dropdown, the browser usually selects one option automatically unless the setup is unusual or uses a placeholder option.

• 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.