html select element with default not in the options [duplicate]

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's the jsfiddle.

now I want the first option the selected one with the content "Choose option" to not be visible in the dropdown. how can i do that, if that's possible with a select element or should i do a custom thing. Thanks in advance.

Answer 1

I believe the closest you can get with a plain HTML-solution is to disable that 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 element will still appear in the the list, but it will be grayed out and it will not be possible to select it from the dropdown after opening it.

Answer 2

You could remove the selected element as soon as you open the list:

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

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