html select element with default not in the 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'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.

I'm sorry, if you don't wnt it to appear, why not just remove it? — Jesus Zamora, Jan 12 '13 at 23:26
because i want it to be there at the first load of the page i don't want to select the first option by default. — Yahya KACEM, Jan 12 '13 at 23:27
@TillHelgeHelwig, and you think that question is the same here, because?!?! — Yahya KACEM, Jan 12 '13 at 23:36
As far as I am aware selected="selected" is not completely valid. Since the selected attribute on its own is a boolean statement in an option statement, it’s presence alone states true, or absence false. Here’s the w3c’s example page based on the spec: http://www.w3.org/wiki/HTML/Elements/option — Mike Kormendy, Oct 22 '14 at 13:17

score 18 · Answer 1 · answered Jan 12 '13 at 23:28

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.

yes, i know that solution i was hoping for another one. thanks anyway. — Yahya KACEM, Jan 12 '13 at 23:32

score 7 · Accepted Answer · answered Jan 12 '13 at 23:27

7

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.

answered Jan 12 '13 at 23:27

philipproplesch

2,127
17
20

that will only remove the selected item after i choose an option not when i click to open the drop down, chack my [jsfiddle](http://jsfiddle.net/yahyaKACEM/QnAKU/1/) – Yahya KACEM Jan 12 '13 at 23:30
Hmm... works fine for me. Which browser do you use? – philipproplesch Jan 12 '13 at 23:34
did the selected option gets removed when you click to open the dropdown. – Yahya KACEM Jan 12 '13 at 23:39
Works fine for me in Chrome, Firefox, Opera and even IE. – philipproplesch Jan 12 '13 at 23:42
actually it worked fine on firefox but chrome still don't work for me. – Yahya KACEM Jan 12 '13 at 23:51

score 5 · Answer 3 · answered Jan 12 '13 at 23:31

<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.

html select element with default not in the options

3 Answers3

Linked