Set the select option as blank as default in HTML select element

Question

I am required to have no option selected by default in drop down menu in HTML. However, I cannot use:

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Because for this I will have to validate to handle the first option.

Can anyone help me in achieving this target without actually including the first option as part of the select tag?

As far as I know this is the only way to get a blank line. What do you mean you'll have to do validation? Just set a check to say if value="" then return false. — Robert, Dec 22 '11 at 14:50
This would be a good opportunity to use radio buttons instead of a dropdown. — Blazemonger, Oct 27 '15 at 20:37
Not a weird requirement at all, in my opinion. I'm in the same boat. I need a 'no option' default, as well. I have several drop downs that aren't required to submit a form. Disabling them in this manner prevents the user from having to make a selection when it's not pertinent. Good question! +1 — Great Scott, Jan 13 '16 at 22:26
Not a weird requirement, if the SELECT had a REQUIRED attribute then having a placeholder label option is a requirement of HTML5 https://dev.w3.org/html5/spec-preview/the-select-element.html#attr-select-required — Testo Testini, Jan 19 '17 at 16:22
@Blazemonger radio buttons are a terrible idea if you have more than 3 or 4. Imagine a dropdown list with 15+ options, or 50 or more? Those have their own design issues in many cases but the issue still stands that radio buttons don't scale well *at all*. — TylerH, Mar 28 '19 at 16:43

score 1476 · Accepted Answer · edited Jul 13 '22 at 11:09

1476

Maybe this will be helpful

<select>
  <option disabled selected value> -- select an option -- </option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

-- select an option -- Will be displayed by default. But if you choose an option, you will not be able to select it back.

You can also hide it using by adding an empty option

<option style="display:none">

so it won't show up in the list anymore.

Option 2

If you don't want to write CSS and expect the same behaviour of the solution above, just use:

<option hidden disabled selected value> -- select an option -- </option>

edited Jul 13 '22 at 11:09

Michael Haddad

4,085
7
42
82

answered May 13 '14 at 17:37

gam6itko

15,128
2
19
18

24

[Here is a JSFiddle of the above](https://jsfiddle.net/tcmrp8md/), in case anyone needs it. – Uwe Keim Mar 15 '16 at 09:33
41

@azerafati as @Rafael_Mori pointed out you can archieve the same by using the "hidden" attribute, so no CSS required. Just pure HTML5 ;) `` – BrainOverflow Mar 26 '17 at 11:43
3

What if i want to be able to select it back? I just don't want it to send anything. Is it possible? – Michael Rogers Mar 09 '19 at 18:39
1

adding a hidden attribute to the option element did the magic for me! did not expect it to be this easy. thanks – SMPLYJR May 14 '19 at 07:18
2

Be aware, both hidden attribute and display style do not work in IE, even 11. https://stackoverflow.com/questions/58862242/option-with-hidden-attribute-not-working-in-ie – yatskovsky Apr 11 '20 at 16:22
Bullseye! Perfect! – Tiago Apr 27 '20 at 22:36
2

What does blank value do? – Sebastian Thomas Jun 11 '20 at 17:00
`` worked for me when I output PHP REQUEST `var_dump($_REQUEST); exit() ; ` I didn't got it the value of `select name` – Salem Aug 31 '20 at 15:24
Nice, didn't think of using `disabled` on the option. Would be great if we could actually do `` and have the value passed as `null` when not specified. Very strange that the option's text is passed if the value isn't provided. – Josh M. Nov 18 '20 at 16:07
1

@SebastianThomas Including `value` without setting it explicitly makes it `true` (at least in React), which is a bit hacky. TypeScript throws an error, for example, because it expects it to be of type `string | number | readonly string[] | undefined`. – Théophile Mar 16 '21 at 14:51
1

Hiding the option (both with display: none and the hidden attribute) will break accessibility with Windows Narrator in scan mode! – Ott Jun 22 '21 at 21:18
in FF 'hiddent' doesn't hide it, but if you wanted it as "default" it also doesn't work, FF remember. i.e: if i have 2 selectboxes and I "play" with hide/show - if I chose something in select1 and then hide/show select2 - then going back to select1 - it stays on the option I chose .... so whatever solution you found - be aware and test from all angles. – Ricky Levi Nov 25 '21 at 10:05
Tiny things like this can really frustrating to deal with on server side especially when creating dynamic content. – Cynthia Onyilimba May 05 '22 at 10:11
In Thymeleaf you need to assign a value to `value`, else this error is displayed: `org.thymeleaf.exceptions.TemplateProcessingException: Attribute "value" is required in "option" tags` – Kevin O. Dec 12 '22 at 13:45

Matschie · Answer 2 · 2012-10-11T14:21:58.633

137

You could use Javascript to achieve this. Try the following code:

HTML

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select>

JS

document.getElementById("myDropdown").selectedIndex = -1;

or JQuery

$("#myDropdown").prop("selectedIndex", -1);

edited Oct 11 '12 at 14:21

answered Dec 22 '11 at 14:52

Matschie

1,561
1
11
9

This solution partially works with Chrome 35: the dropdown does not show any selection when the list of option is invisible, but shows the first option selected when the list of options is made visible. Safari 7 behaves as intended though. – flochtililoch Jul 07 '14 at 21:25
1

The interesting thing is: this works with HTML form validation. If you use the `required` attribute on the `select` element and submit without selecting an option the form validation will fail and tell you, you have to make a selection. Therefore I really like this approach. (At least tested in Chrome) – Andreas Linnert Feb 11 '17 at 10:28
1

Does not work (at least in current browsers as of this writing - and unnecessarily relies on javascript. – silentmouth May 18 '18 at 19:40
1

As of 2019, only Safari IOS 10 refuses to play ball with this – Ayyash Jul 01 '19 at 18:22

GlenPeterson · Answer 3 · 2022-01-31T15:22:35.620

Today (2015-02-25)

This is valid HTML5 and sends a blank (not a space) to the server:

<option label=" "></option>

Verified validity on http://validator.w3.org/check

Verified behavior with Win7(IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10(Chrome40, FF35) OSX_Yosemite(Safari8, Chrome40) Android(Samsung-Galaxy-S5)

The following also passes validation today, but passes some sort of space character to the server from most browsers (probably not desirable) and a blank on others (Chrome40/Linux passes a blank):

<option>&#160;</option>

Previously (2013-08-02)

According to my notes, the non-breaking-space entity inside the option tags shown above produced the following error in 2013:

Error: W3C Markup Validaton Service (Public): The first child option element of a select element with a required attribute and without a multiple attribute, and whose size is 1, must have either an empty value attribute, or must have no text content.

At that time, a regular space was valid XHTML4 and sent a blank (not a space) to the server from every browser:

<option> </option>

Future

It would make my heart glad if the spec was updated to explicitly allow a blank option. Preferably using the briefest syntax. Either of the following would be great:

<option />
<option></option>

Test File

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
</head>

<body>
  <form action="index.html" method="post">
    <select name="sel">
      <option label=" "></option>
    </select>
  </form>
</body>

</html>

Rafael Mori · Answer 4 · 2020-10-27T12:29:56.213

39

<td><b>Field Label:</b><br>
    <select style='align:left; width:100%;' id='some_id' name='some_name'>
    <option hidden selected>Select one...</option>
    <option value='Value1'>OptLabel1</option>
    <option value='Value2'>OptLabel2</option>
    <option value='Value3'>OptLabel3</option></select>
</td>

Just put "hidden" on option you want to hide on dropdown list.

edited Oct 27 '20 at 12:29

answered Oct 05 '16 at 19:53

Rafael Mori

821
9
7

score 17 · Answer 5 · answered Oct 12 '17 at 12:57

Solution that works by only using CSS:

A: Inline CSS

<select>
    <option style="display:none;"></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

B: CSS Style Sheet

If you have a CSS file at hand, you can target the first option using:

select.first-opt-hidden option:first-of-type {
  display:none;
}

<select class="first-opt-hidden">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

score 14 · Answer 6 · edited Jan 28 '22 at 06:46

14

This should help:

https://www.w3schools.com/tags/att_select_required.asp

 <form>
 <select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="submit">Submit</button>
</form>

edited Jan 28 '22 at 06:46

Uwe Keim

39,551
56
175
291

answered Dec 08 '18 at 12:02

rohan parab

1,589
1
14
18

1

This is the most modern (html5) way to achieve this requirement, be aware this requires a type=submit button. A type=button with a onclick submit handler doesn't automatically require the user to make a selection. – Arjan Feb 20 '20 at 10:08

score 10 · Answer 7 · answered May 15 '19 at 06:29

Just a small remark:

some Safari browsers do not seem to respect neither the "hidden" attribute nor the style setting "display:none" (tested with Safari 12.1 under MacOS 10.12.6). Without an explicit placeholder text, these browsers simply show an empty first line in the list of options. It may therefore be useful to always provide some explanatory text for this "dummy" entry:

<option hidden disabled selected value>(select an option)</option>

Thanks to the "disabled" attribute, it won't be actively selected anyway.

score 4 · Answer 8 · answered Jul 16 '17 at 15:08

<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

You can avoid custom validation in this case.

score 2 · Answer 9 · answered Oct 20 '18 at 17:52

I understand what you are trying to do.The best and the most successful way is :

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>

score 2 · Answer 10 · answered Feb 07 '19 at 15:38

2

I found it really interesting because I just experienced the same thing not so long time ago. However, I came across to an example on the Internet about the solution regarding this.

Without any further ado, see the code fragment below:

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 3</option>
</select>

With that, it will stay un-submittable but selectable, anytime. More convenience for User Interface and great for User Experience.

Well that's all, I hope it helps. Cheers!

answered Feb 07 '19 at 15:38

farisfath25

71
1
8

Making it unable to submit but also drawing the user's attention to the dropdown seems redundant, but I like the suggestion – Iofacture Apr 05 '19 at 21:46
@lofacture: thanks for the input. actually, the code i wrote was the one i was wanting, but yes as you said, it depends on the needs of the user/owner – farisfath25 Feb 19 '20 at 07:22

score 1 · Answer 11 · answered Apr 23 '18 at 09:30

I'm using Laravel 5 framework and @Gambi `s answer worked for me as well but with some changes for my project.

I have the option values in a database table and I use them with a foreach statement. But before the statement I have added an option with @Gambit suggested settings and it worked.

Here my exemple:

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset

I hope this helps someone as well. Keep up the good work!

score 1 · Answer 12 · answered May 16 '18 at 07:46

1

Try this:

<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>

The first option in the drop down would be blank.

answered May 16 '18 at 07:46

Abhijit Pai

49
1
3

score 1 · Answer 13 · answered Apr 01 '19 at 08:05

In order to show please select a value in drop down and hide it after some value is selected . please use the below code.

it will also support required validation.

<select class="form-control" required>
<option disabled selected value style="display:none;">--Please select a value</option>
              <option >Data 1</option>
              <option >Data 2</option>
              <option >Data 3</option>
</select>

score 1 · Answer 14 · answered May 07 '20 at 18:29

If you are using Angular (2+), (or any other framework), you could add some logic. The logic would be: only display an empty option if the user did not select any other yet. So after the user selected an option, the empty option disappears.

For Angular (9) this would look something like this:

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>

score 1 · Answer 15 · answered Feb 17 '21 at 17:59

1

For those who are using <select multiple> (combobox; no dropdown), this worked for me:

<select size=1 disabled multiple>
  <option hidden selected></option>
  <option>My Option</option>
</select>

answered Feb 17 '21 at 17:59

Andrew

5,839
1
51
72

score 1 · Answer 16 · answered Dec 22 '11 at 16:54

There is no HTML solution. By the HTML 4.01 spec, browser behavior is undefined if none of the option elements has the selected attribute, and what browsers do in practice is that they make the first option pre-selected.

As a workaround, you could replace the select element by a set of input type=radio elements (with the same name attribute). This creates a control of the same kind though with different appearance and user interface. If none of the input type=radio elements has the checked attribute, none of them is initially selected in most modern browsers.

score 0 · Answer 17 · answered Sep 15 '20 at 10:46

0

If you don't need any empty option at first, try this first line:

    <option style="display:none"></option>

answered Sep 15 '20 at 10:46

Damith Alahapperuma

11
1

score 0 · Answer 18 · answered Oct 26 '20 at 15:58

0

just use "..option hidden selected.." as default option

answered Oct 26 '20 at 15:58

Jim

1

score 0 · Answer 19 · answered Oct 09 '21 at 06:20

I guess a good idea would be to use the radio buttons, set #1 as default and hide it, give it for example a name="init" and a value="null" or whatever, up to you!

this way the radio buttons list has a value definitely, but default of null can be used logically!

I think it's not necessary to elaborate further, since the idea can easily be implemented with display: none; or visibility: hidden;

... whereas I think the first one display: none; is the better option:

score 0 · Answer 20 · answered Feb 25 '22 at 17:08

In react, you can give a dummy value (say -1) with select tag as below and same value can be used with this disabled option of yours. (WORKED FOR ME)

const nonEmpty = selected[identifierField] || false;

<select
    onChange={(e) => {
      onSelect(
        options.find((option) => option[identifierField] === e.target.value)
      );
    }}
    value={nonEmpty || -1}
  >
    <option disabled value={-1}>Select Option</option>
    {options.map((option) => (
      <option key={option[identifierField]} value={option[identifierField]}>
        {option[displayField]}
      </option>
    ))}
  </select>

score 0 · Answer 21 · answered Jun 07 '22 at 06:59

0

option style="display:none"

Is bad solution for Tablet: iPad Pro / iOS 15 / Safari An unnecessary row in the dropdown appears, only for real devices. Doesn`t reproduce on the emulator.

answered Jun 07 '22 at 06:59

Anna

31
1
4

Tristan Bailey · Answer 22 · 2016-01-28T10:09:18.767

-3

Try this:

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

Validates in HTML5. Works with required attribute in select element. Can be re-selected. Works in Google Chrome 45, Internet Explorer 11, Edge, Firefox 41.

edited Jan 28 '16 at 10:09

answered Oct 01 '15 at 13:41

Tristan Bailey

427
4
13

Set the select option as blank as default in HTML select element

22 Answers22

Today (2015-02-25)

Previously (2013-08-02)

Future

Test File

Linked

Related