Blank HTML SELECT without blank item in dropdown list

Question

How implement subj?

when i write:

<form>
  <select>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

then default selected item is "aaaa"

when i write:

<form>
  <select>
     <option value=""></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

then default selected item is blank, but this blank item presents in drop down.

how i can implement SELECT tag with default blank value that hidden in dropdown list?

Possible duplicate of [default select option as blank](http://stackoverflow.com/questions/8605516/default-select-option-as-blank) — Blazemonger, Oct 27 '15 at 20:39

score 189 · Answer 1 · edited Mar 04 '16 at 21:43

189

Just use disabled and/or hidden attributes:

<option selected disabled hidden style='display: none' value=''></option>

selected makes this option the default one.
disabled makes this option unclickable.
style='display: none' makes this option not displayed in older browsers. See: Can I Use documentation for hidden attribute.
hidden makes this option to don't be displayed in the drop-down list.

edited Mar 04 '16 at 21:43

John Zabroski

2,212
2
28
54

answered Aug 28 '13 at 14:33

Eduardo

1,891
1
11
2

3

Actually IE 11 does display the "hidden" option. – Edward Olamisan Oct 15 '13 at 18:47
6

Webkit doesn't seem to support the 'hidden' attribute – Ethan Reesor Jun 24 '14 at 16:19
2

As mentioned in [Can I Use](http://caniuse.com/#search=hidden), the `hidden` attribute is effectively `display: none`, so to support older browsers: `` – Neta Dec 24 '15 at 00:35

pimvdb · Answer 2 · 2012-04-12T14:20:17.407

68

You can by setting selectedIndex to -1 using .prop: http://jsfiddle.net/R9auG/.

For older jQuery versions use .attr instead of .prop: http://jsfiddle.net/R9auG/71/.

edited Apr 12 '12 at 14:20

answered Jun 03 '11 at 06:49

pimvdb

151,816
78
307
352

@IronicMuffin: Thanks; just tested and seems to work on all mainstream browsers in fact. – pimvdb Mar 05 '12 at 20:29
@zobidafly: Thanks for editing; I've elaborated a little bit. – pimvdb Apr 12 '12 at 14:20
1

`.attr` will fail in new jQuery versions. Trying to be smart made me fail. – Carson Ip Jun 12 '14 at 07:59

score 36 · Answer 3 · answered Oct 31 '13 at 10:38

36

Simply using

<option value="" selected disabled>Please select an option...</option>

will work anywhere without script and allow you to instruct the user at the same time.

answered Oct 31 '13 at 10:38

mvreijn

2,807
28
40

score 24 · Answer 4 · answered Dec 16 '11 at 14:37

24

<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>

answered Dec 16 '11 at 14:37

Andrey Ravkov

1,268
12
21

1

ff/chrome - ok, opera/ie7-9 - not ok you can test that here (with or without js): http://jsfiddle.net/R9auG/145/ so I recommend js-approach by @pimvdb – tibalt Oct 04 '12 at 04:11

Mingwei Samuel · Answer 5 · 2013-06-11T23:41:09.947

Here is a simple way to do it using plain JavaScript. This is the vanilla equivalent of the jQuery script posted by pimvdb. You can test it here.

<script type='text/javascript'>
  window.onload = function(){
    document.getElementById('id_here').selectedIndex = -1;
  }
</script>

.

<select id="id_here">
  <option>aaaa</option>
  <option>bbbb</option>
</select>

Make sure the "id_here" matches in the form and in the JavaScript.

score 3 · Answer 6 · answered Jan 23 '16 at 04:53

For purely html @isherwood has a great solution. For jQuery, give your select drop down an ID then select it with jQuery:

<form>
  <select id="myDropDown">
    <option value="0">aaaa</option>
    <option value="1">bbbb</option>
  </select>
</form>

Then use this jQuery to clear the drop down on page load:

$(document).ready(function() {
    $('#myDropDown').val(''); 
});

Or put it inside a function by itself:

$('#myDropDown').val('');

accomplishes what you're looking for and it is easy to put this in functions that may get called on your page if you need to blank out the drop down without reloading the page.

score 3 · Answer 7 · answered Jun 03 '11 at 06:46

3

You can't. They simply do not work that way. A drop down menu must have one of its options selected at all times.

You could (although I don't recommend it) watch for a change event and then use JS to delete the first option if it is blank.

answered Jun 03 '11 at 06:46

Quentin

914,110
126
1,211
1,335

3

Why don't you recommend this behavior? – Josh Noe Jun 01 '12 at 15:17
There are plenty of cases where you want the user to actively pick something from a list. I don't think JS is the most optimal way of doing it (although it seems to be the only way), but i really think there *should* be a way. – qwerty May 14 '13 at 17:08

score 0 · Answer 8 · edited Sep 01 '14 at 15:16

0

You can try this snippet

$("#your-id")[0].selectedIndex = -1

It worked for me.

edited Sep 01 '14 at 15:16

dgellow

692
1
11
18

answered Feb 06 '14 at 23:02

Shenbag

9
1

1

It would be best to provide a http://jsfiddle.net/ to accompany the answer in order to provide a clearer explanation. – Anonymous Feb 06 '14 at 23:25
1

This assumes the OP is using jQuery. – evanrmurphy Oct 07 '14 at 19:18

Blank HTML SELECT without blank item in dropdown list

8 Answers8

Linked