Default text which won't be shown in drop-down list

Question

I have a select which initially shows Select language until the user selects a language. When the user opens the select, I don't want it to show a Select language option, because it's not an actual option.

How can I achieve this?

Torsk

Answer 1

Kyle's solution worked perfectly fine for me so I made my research in order to avoid any Js and CSS, but just sticking with HTML. Adding a value of selected to the item we want to appear as a header forces it to show in the first place as a placeholder. Something like:

<option selected disabled>Choose here</option>

The complete markup should be along these lines:

<select>
    <option selected disabled>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

You can take a look at this fiddle, and here's the result:

If you do not want the sort of placeholder text to appear listed in the options once a user clicks on the select box just add the hidden attribute like so:

<select>
    <option selected disabled hidden>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

Check the fiddle here and the screenshot below.

Ambros

This is a great answer but when using Angular JS, then it doesn't work since Angular automatically adds an empty option and sets it as the default – Catchfly

Anyway, just for reference, here's how you would do in Angular, just combine the above approach with the Angular specific explained here metaltoad.com/blog/… – Ambros

Note that the hidden attribute, used in the answer above, is an attribute that can be set on any HTML element, and is usually (but not necessarily) implemented to be equivalent to setting display: none with CSS. – Hannahhannan

Note also that setting hidden on an option in a select doesn't work in Safari, on either iOS or Mac. This answer thus offers only partial browser support. – Hannahhannan

Still, this is an attempt at solving the problem at hand using best practices, progressive enhancement and zero hacks. Also, the first option will not be selectable (it's disabled) so the usability on all platforms is safeguarded as well – Ambros

Is possible can I add color, so that customer can select color instead of text choices like,, colors red, blue color instead of one, two values,, – Leery

Answer 2

Here is the solution:

<select>
    <option style="display:none;" selected>Select language</option>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Egress

Note that selected="true" is invalid. Instead, use selected="selected" in (X)HTML or just selected in HTML. It seems you confused selected attribute with selected property, which is changed like this: myOption.selected = true; or myOption.selected = false; – Handset

"display: none" is ignored by browsers that use device-native selects like Android and iOS. You must remove the option from DOM in select.focus and return it and select it in select.blur to make it work. – Vidar

-1; like Nobita's answer using hidden (which is "typically implemented in CSS" using display: none anyway), using display: none on an option doesn't work in Safari; the option still appears. – Hannahhannan

Answer 3

The proper and semantic way is using a placeholder label option:

• Add an option element as the first child of the select
• Set value= "" to that option
• Set the placeholder text as the content of that option
• Add the required attribute to the select

This will force the user to select another option in order to be able to submit the form, and browsers should render the option as desired:

If a select element contains a placeholder label option, the user agent is expected to render that option in a manner that conveys that it is a label, rather than a valid option of the control.

However, most browsers will render it as a normal option. So we will have to do fix it manually, by adding the following to the option:

• The selected attribute, to make it selected by default
• The disabled attribute, to make it non-selectable by the user
• display: none, to hide it from the list of values

select > .placeholder {
  display: none;
}

<select required>
  <option class="placeholder" selected disabled value="">Select language</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Handset

It should be noted that even this (which is the most thorough attempt at solving this problem out of all the answers here) doesn't work on Safari, either on iOS or Mac. The option will still when the select is opened. – Hannahhannan

@MarkAmery I suggest you do like it's proposed in @Nobita answer and simply add the hidden attribute to the placeholder option tag instead of display: none as it seems that most mobile browsers ignore the display: none CSS attribute and it's even more semantically correct in my opinion. – Diseuse

@Diseuse In the comments on that answer, I noted that hidden is generally implemented as display: none under the hood (and the spec explicitly suggests this as a "typical" implementation). As such, I'd be surprised if there were any browsers - mobile or otherwise - where hidden worked but display: none did not. Can you provide any example? – Hannahhannan

Answer 4

Because you can't use assign placeholders for select tags, I don't believe that there is any way to do exactly what you're asking for with pure HTML/CSS. You can, however, do something like this:

<select>
  <option disabled="disabled">Select language</option>
  <option>Option 1</option>
</select>

"Select language" will show up in the dropdown, but once another option is selected it will not be possible to reselect it.

I hope that helps.

Ticknor

I found that the best is the combination of disabled and selected with style="display:none;". disabled is useful when you want to perform validation - it makes sure you have no enabled option selected by default. – Heliometer

-1 because other answers here (notably Nobtia's and Oriol's) provide both much more explanatory detail and much more complete solutions. – Hannahhannan

Answer 5

Try this:

<div class="selectSelection">
    <select>
        <option>Do not display</option>
        <option>1</option>
        <option>1</option>
    </select>
</div>

In the CSS:

.selectSelection option:first-child{
    display:none;
}

Gatling

This answer contains nothing that other answers don't also contain in more detail, plus it has bad formatting; -1. – Hannahhannan

Answer 6

I have a solution with a span displayed above the select until a selection done. The span displays the default message, and so it's not in the list of propositions:

HTML:

<span id="default_message_overlay">Default message</span>
<select id="my_select">
    <option value="1">Option 1</option>  
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

CSS:

#default_message_overlay {
    position: absolute;
    display: block;
    width: 120px;
    color: grey;
}
select {
    width: 150px;
}

Javascript (with JQuery):

$(document).ready(function() {
    // No selection at start
    $('#my_select').prop("selectedIndex", -1);

    // Set the position of the overlay
    var offset = $('#my_select').offset();
    offset.top += 3;
    offset.left += 3;
    $('#default_message_overlay').offset(offset);

    // Remove the overlay when selection changes
    $('#my_select').change(function() {
        if ($(this).prop("selectedIndex") != -1) {
            $('#default_message_overlay').hide();
        }
    });
});

I've made a jsfiddle for demo. Tested with Firefox and IE8.

Hoxsie

Chrome on OSX always shows the first option selected, but it seems to be OSX specific, because all solutions provided here lead to the first visible option being selected. – Incurrent

instead of span in there use legend and that would be perfect or label – Parimutuel

This is an interesting approach, and the only possible way that I see of getting this behaviour to work on Safari, but it's badly implemented here; you at least need pointer-events: none on your span to allow clicks to pass through to select. – Hannahhannan

Answer 7

To answer your question directly use this code on the option you do not want it to appear in option list:

<option value="" hidden selected>Select Language</option>

Scandalize

Answer 8

<option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option>

you can of course move the css to a css file if you want, and put a script to catch the esc button to select the disabled again. Unlike the other similar answers I put value="", this is so if you send the value(s) of your select list with a form, it won't contain "chose something". In asp.net mvc 5 sent as json compiled with var obj = { prop:$('#ddl').val(),...}; and JSON.stringify(obj); the value of prop will be null.

Homophonous

Answer 9

Op1:

$("#MySelectid option").each(function () {
        if ($(this).html() == "text to find") {
            $(this).attr("selected", "selected");
            return;
        }
});

Op2:

$('#MySelectid option')
.filter(function() { return $.trim( $(this).text() ) == 'text to find'; })​​​​​​​​.attr('selected','selected');​​​​​​​

Epic