Illustrations

Question

100

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

rated 0 times [ 102] [ 2] / answers: 1 / hits: 45208 / 10 Years ago, mon, december 8, 2014, 12:00:00

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:

Closed

Opened:

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jenna

Add To Favorites

Follow

Total Points: 706

Total Questions: 107

Total Answers: 106

Location: Azerbaijan

Member since Tue, Sep 21, 2021

3 Years ago

answered 10 Years ago arron · Accepted Answer

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;

}