How to Set a Default Selected Option in an HTML Select Element

By the end of this page, you will understand how default selection works in an HTML <select> element, why putting value on <select> does not set the initial choice in plain HTML, and how to correctly choose a default option using the selected attribute or JavaScript when needed.

A <select> element contains a list of <option> elements. The selected item is not determined by a value attribute on the <select> tag in plain HTML markup. Instead, the browser decides the initial selected option based on the <option> elements inside it.

In static HTML, the default choice is usually set by adding the selected attribute to the correct <option>.

<select name="hall" id="hall">
  <option>1</option>
  <option>2</option>
  <option selected>3</option>
  <option>4</option>
  <option>5</option>
</select>

A more explicit version uses value on each option:

Think of a <select> like a menu with several items, and each <option> is one item on that menu.

The browser asks: which menu item should start checked?

It does not look at the <select> tag and say, "I see value="3", so I will pick 3." Instead, it looks through the <option> tags and checks whether one of them is marked as the starting choice.

So:

• <select> is the container.
• <option> is the actual choice.
• selected is the sticker that says, "start with this one."

If no option is marked selected, the browser usually picks the first one by default.

Basic syntax

Use selected on the option you want chosen initially.

<select name="hall" id="hall">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3" selected>3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

In this example, the option with value 3 is selected when the page first loads.

Why your original code did not work

  1
  2
  3
  4
  5

Consider this example:

<select id="hall">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3" selected>3</option>
  <option value="4">4</option>
</select>

Here is what happens step by step:

1. The browser reads the <select> element.

2. It reads each <option> inside it.

3. It checks whether any option has the selected attribute.

4. It finds:

   < = >3
   

Default selected options are common in real applications.

Edit forms

When editing a user profile, you may need to show the saved country, role, or department.

<select name="role">
  <option value="user">User</option>
  <option value="admin" selected>Admin</option>
  <option value="editor">Editor</option>
</select>

Placeholder choices

A form may start with a prompt such as "Choose a category".

<select name="category" required>
  <option value="" selected>Choose a category</option>
  <option value=>Books
  Music

In real projects, developers often use a few common patterns around <select> elements.

Server-rendered forms

A backend template marks the correct option as selected.

Example idea:

<option value="admin" selected>Admin</option>

This is common when editing existing records.

JavaScript state binding

Frameworks and plain JavaScript often set the current selection from application state.

select.value = userSettings.hall;

This is useful when data arrives after page load.

Guard clauses for invalid values

Developers often check whether a value exists before assigning it.

if (savedValue) {
  select.value = savedValue;
}

This avoids accidentally selecting an empty or unintended option.

Validation patterns

A placeholder option with an empty value is often paired with required.

Mistake 1: Putting value on <select> in plain HTML and expecting it to preselect an option

Broken example:

<select value="3">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Why it is a problem:

• This does not set the initial selected option in static HTML.

Fix:

<select>
  <option value="1">1</option>
  <option value="2">2</option>
  3

selected vs value on <select>

Quick rules

• To set the default option in HTML, use selected on the correct <option>.
• Do not rely on value on the <select> tag in plain HTML to choose the default option.
• In JavaScript, use select.value = '...' to change the selected option.
• If no option is marked selected, the first option is usually selected.

Static HTML

<select name="hall">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3" selected>3</option>
</select>

JavaScript

.(). = ;

Why does value="3" on <select> not select the option in HTML?

Because the initial selection is determined by the <option> elements, not by the value attribute in static markup on <select>.

How do I set the default selected option in HTML?

Add the selected attribute to the option you want selected by default.

<option value="3" selected>3</option>

Can I change the selected option with JavaScript?

Yes. Use the select element's value property.

document.getElementById('hall').value = '3';

What happens if no option is marked selected?

In a normal dropdown, the browser usually selects the first option.

Should I always add value to each ?

• HTML forms — <select> is part of how forms collect and submit user input.
• HTML option element — The default choice is controlled at the <option> level.
• Form validation — Placeholder options and required fields often depend on correct default selection.
• DOM manipulation — JavaScript can update selected values after the page loads.
• JavaScript element properties — select.value is a property developers frequently read and write.
• Form submission — The selected option determines what value gets submitted.
• Multiple select inputs — Selection behavior changes when multiple is used.