Sentry Answers>HTML>

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

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

Matthew C.

The ProblemJump To Solution

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”:

Click to Copy
<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:

Click to Copy
<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:

Click to Copy
<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.

  • ResourcesWhat is Distributed Tracing
  • logo
    Listen to the Syntax Podcast

    Tasty Treats for Web Developers brought to you by Sentry. Web development tips and tricks hosted by Wes Bos and Scott Tolinski

    Listen to Syntax

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.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.