Answers by Sentry

How can I set the default value for an HTML select element?

Matthew C.

The Problem

The default value of a <select> element when a page first loads is the value of the first option element. In the code example below, the select element will have a default value of “milk”:

<select>
  <option value="milk">milk</option>
  <option value="sugar">sugar</option>
  <option value="eggs">eggs</option>
</select>

How do you set a different default value?

The Solution

You can add the selected attribute to the option element that you want to make the initial default value:

<select>
  <option value="milk">milk</option>
  <option value="sugar" selected>sugar</option>
  <option value="eggs">eggs</option>
</select>

If you want the default value to be an empty string, you can add an extra option element as the first option element and set its value to an empty string:

<select>
  <option disabled selected value="">Select an option</option>
  <option value="milk">milk</option>
  <option value="sugar">sugar</option>
  <option value="eggs">eggs</option>
</select>

This is useful if you want the user to select a value for themselves and not just use the default value. Adding the disabled attribute to the first option makes the option unselectable. You can add form validation to require the user to select an option.

Loved by over 4 million developers and more than 90,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.

learn more about sentryjoin our discord
Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

Try Sentry For FreeRequest a Demo
    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.