default select option as blank

Question

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

I cannot use this,

<select>

  <option></option>

  <option>Option 1</option>

  <option>Option 2</option>

  <option>Option 3</option>

</select>

Because of 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 1

Try the code given below:

<select>

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

    <option>Option 1</option>

    <option>Option 2</option>

    <option>Option 3</option>

</select>

// -- you can select an option -- It will be displayed by default. But if you choose an option, you will not be able to select it back.

You can also hide it using by adding an empty option like this:

<option style="display:none">

• But, If you don't want to write CSS and expect the same behavior of the solution above, then just use the code given below:

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