How can I hide default <select> <option> when the drop-down is clicked?

Question

I want to have a <select> element that's default chosen option is "____". In other word's, blank.

When the drop-down is focused, I want the "____" option to not be in the options that can be selected. That way the user has to choose something other than "____" as their option.

Does that make sense?

Illustrations

Closed:

Opened:

As you can see, the option "___" is not in the list when it is being selected. That is my desired end result.

I've tried using onFocus events to remove options, but that just unfocuses the element, and replaces the default option with another one.

Answer 1

You can leverage the hidden attribute in HTML. Try with this example

<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 this fiddle or the screenshots below.

Before clicking:

After clicking:

Answer 2

To hide the default option, allowing the others to show, there are a few ways to go.

Unfortunately, you can't hide option elements in all browsers. Again, display:none; does not work in all browsers on options ...

In the past when I have needed to do this, I have set their disabled attribute, like so...

$('option').prop('disabled', true);

I've then used the hiding where it is supported in browsers using this piece of CSS...

select option[disabled] {
    display: none;
}

Answer 3

CSS is your friend, set display:none for the option you want to hide.

<select>
<option style="display:none" selected="selected" value=""> </option>
<option value="visi1">Visible1</option>
<option value="visi2">Visible2</option>
<option value="visi3">Visible3</option>
</select>

Here's an extra with jQuery that will ensure the first option of any select is invisible:

$('select:first-child').css({display:none;});