Advertisement
Advertisement


default select option as blank


Question

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,

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

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?

2018/12/12
1
479
12/12/2018 3:07:23 PM

Accepted Answer

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>

2019/02/01
1068
2/1/2019 5:43:15 PM

You could use Javascript to achieve this. Try the following code:

HTML

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select> 

JS

document.getElementById("myDropdown").selectedIndex = -1;

or JQuery

$("#myDropdown").prop("selectedIndex", -1);
2012/10/11

Today (2015-02-25)

This is valid HTML5 and sends a blank (not a space) to the server:

<option label=" "></option>

Verified validity on http://validator.w3.org/check

Verified behavior with Win7(IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10(Chrome40, FF35) OSX_Yosemite(Safari8, Chrome40) Android(Samsung-Galaxy-S5)

The following also passes validation today, but passes some sort of space character too the server from most browsers (probably not desirable) and a blank on others (Chrome40/Linux passes a blank):

<option>&#160;</option>

Previously (2013-08-02)

According to my notes, the non-breaking-space entity inside the option tags shown above produced the following error in 2013:

Error: W3C Markup Validaton Service (Public): The first child option element of a select element with a required attribute and without a multiple attribute, and whose size is 1, must have either an empty value attribute, or must have no text content.

At that time, a regular space was valid XHTML4 and sent a blank (not a space) to the server from every browser:

<option> </option>

Future

It would make my heart glad if the spec was updated to explicitly allow a blank option. Preferably using the briefest syntax. Either of the following would be great:

<option />
<option></option>

Test File

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
</head>
<body>
  <form action="index.html" method="post">
    <select name="sel">
      <option label=" "></option>
    </select>
  </form>
</body>
</html>
2015/02/25

<td><b>Ação da atividade:</b><br>
 <select style='align:left; width:100%;' id='cbxTipoSFA' name='cbxTipoSFA'>
 <option hidden selected>Selecione uma opção</option>
 <option value='Instalação'>Instalação</option>
 <option value='Solicitação'>Solicitação</option>
 <option value='Retirada'>Retirada</option></select>
</td>

Just put "hidden" on option you want to hide on dropdown list.

2018/05/10

Solution that works by only using CSS:

A: Inline CSS

<select>
    <option style="display:none;"></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

B: CSS Style Sheet

If you have a CSS file at hand, you can target the first option using:

select.first-opt-hidden option:first-of-type {
  display:none;
}
<select class="first-opt-hidden">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

2017/10/12

This should help :

https://www.w3schools.com/tags/att_select_required.asp

 <form>
 <select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="submit">Submit</button>
</form>

2019/06/16

Source: https://stackoverflow.com/questions/8605516
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]