The default html selector is not in options

Question

Possible duplicate:
<select> placeholder

I want to do something like this:

<select> <option selected="selected">Choose option</option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> </select> 

here is jsfiddle.

Now I want the first option selected with the content "Select Option" not to appear in the drop-down list. how can I do this, if possible with the select element or should I do the usual thing. Thanks in advance.

Answer 1

You can delete the selected item immediately after opening the list:

 $('select').click(function () { $('option[selected="selected"]', this).remove(); }); 

I am not aware of any native HTML / HTML5 solution.

Answer 2

I believe that the closest you can come across with a simple HTML solution is to disable this option:

 <select> <option selected="selected" disabled="disabled">Choose option</option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> </select> 

Demo

The item will still be displayed in the list, but it will not be available, and it will not be possible to select from the drop-down list after it is opened.

Answer 3

 <select> <option selected="selected" disabled="disabled">Choose option</option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> </select> 

This will display a “select option” before selecting, but will not allow the user to select it.