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

Answer 1

<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 show "choose option" before selecting, but will not allow the user to select it.

Answer 2

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 3

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.