default select option as blank

Pankaj Parashar picture Pankaj Parashar · Dec 22, 2011 · Viewed 678.7k times · Source

I have a very weird requirement, wherein I am required to have no option selected by default in drop down menu in HTML. However,

I cannot use this,

Because, for this I will have to do validation to handle the first option. Can anyone help me in achieving this target without actually including the first option as part of the select tag?

Answer

Gambit picture Gambit · May 13, 2014

Maybe this will be helpful

<select>
    <option disabled selected value> -- select an option -- </option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

-- select an option -- Will be displayed by default. But if you choose an option,you will not be able select it back.

You can also hide it using by adding an empty option

<option style="display:none">

so it won't show up in the list anymore.

Option 2

If you don't want to write CSS and expect the same behaviour of the solution above, just use:

<option hidden disabled selected value> -- select an option -- </option>