How to display text on the option bar, but not as an option in HTML.

Question

I have looked around for a while now and could not find anything. The thing I want to do is to have a dropdown menu and have a default title on it, but when you press the option it will change it to that (which it already does). I have this basic code here:

    <select>
        <option>Choose Color</option>
        <option value="red">Option 1</option>
        <option value="green">Option 2</option>
        <option value="blue">Option 3</option>
    </select>

So here I have 4 options. However I only want 3 (because at the moment "Choose Color" is an option which I do not want) and I want the "Choose Color" just to be a title for if nothing is selected (or default). - Thanks

You can use [`optgroup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) — Martin Smith, Nov 09 '14 at 17:02
possible duplicate of [How to add a title to a html select tag](http://stackoverflow.com/questions/18179960/how-to-add-a-title-to-a-html-select-tag) — Martin Smith, Nov 09 '14 at 17:02

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

You could use this trick:

<select>
    <option selected="selected" disabled="disabled" value="" style="display: none;">Select your option</option>
    <option value="red">Option 1</option>
    <option value="green">Option 2</option>
    <option value="blue">Option 3</option>
</select>

Improved answer from here.

edited May 23 '17 at 12:05

Community

1
1

answered Nov 09 '14 at 16:51

skobaljic

9,379
1
25
51

score 0 · Answer 2 · answered Nov 09 '14 at 16:59

0

You can try this:

<select>
    <option style="display: none;">Choose Color</option>
    <option value="red">Option 1</option>
    <option value="green">Option 2</option>
    <option value="blue">Option 3</option>
</select>

answered Nov 09 '14 at 16:59

Weafs.py

22,731
9
56
78

Ahh yes, it is much more compact. Thanks – Bitten Fleax Nov 09 '14 at 17:04

How to display text on the option bar, but not as an option in HTML.

2 Answers2