Establezca la opción de selección en blanco por defecto en el elemento de selección HTML

Question 1

No debo tener ninguna opción seleccionada de forma predeterminada en el menú desplegable en HTML. Sin embargo, no puedo usar:

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

Porque para esto tendré que validar para manejar la primera opción.

¿Alguien puede ayudarme a lograr este objetivo sin incluir la primera opción como parte de la etiqueta de selección?

Question 2

Tal vez esto sea útil

<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 -- Se mostrará de forma predeterminada. Pero si elige una opción, no podrá volver a seleccionarla.

También puede ocultarlo usando agregando un vacío option

<option style="display:none">

por lo que ya no aparecerá en la lista.

opcion 2

Si no desea escribir CSS y espera el mismo comportamiento de la solución anterior, simplemente use:

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

Question 3

Podrías usar Javascript para lograr esto. Prueba el siguiente código:

HTML

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

JS

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

o JQuery

$("#myDropdown").prop("selectedIndex", -1);

Question 4

Hoy (2015-02-25)

Esto es HTML5 válido y envía un espacio en blanco (no un espacio) al servidor:

<option label=" "></option>

Validez verificada el http://validator.w3.org/check

Comportamiento verificado con Win7 (IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10 (Chrome40, FF35) OSX_Yosemite (Safari8, Chrome40) Android (Samsung-Galaxy-S5)

Lo siguiente también pasa la validación hoypero pasa algún tipo de carácter de espacio al servidor desde la mayoría de los navegadores (probablemente no deseable) y un espacio en blanco en otros (Chrome40/Linux pasa un espacio en blanco):

<option>&#160;</option>

Anteriormente (2013-08-02)

De acuerdo con mis notas, la entidad de espacio sin ruptura dentro de las etiquetas de opciones que se muestran arriba produjo el siguiente error en 2013:

Error: servicio de validación de marcado W3C (público): el primer elemento de opción secundario de un elemento de selección con un atributo requerido y sin un atributo múltiple, y cuyo tamaño es 1, debe tener un atributo de valor vacío o no debe tener contenido de texto.

En ese momento, un espacio regular era XHTML4 válido y enviaba un espacio en blanco (no un espacio) al servidor desde cada navegador:

<option> </option>

Futuro

Me alegraría el corazón si la especificación se actualizara para permitir explícitamente una opción en blanco. Preferiblemente utilizando la sintaxis más breve. Cualquiera de los siguientes sería genial:

<option />
<option></option>

Archivo de prueba

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

Question 5

<td><b>Field Label:</b><br>
    <select style="align:left; width:100%;" id='some_id' name="some_name">
    <option hidden selected>Select one...</option>
    <option value="Value1">OptLabel1</option>
    <option value="Value2">OptLabel2</option>
    <option value="Value3">OptLabel3</option></select>
</td>

Simplemente ponga “oculto” en la opción que desea ocultar en la lista desplegable.

Question 6

Solución que funciona solo usando CSS:

R: CSS en línea

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

B: Hoja de estilo CSS

Si tiene un archivo CSS a mano, puede apuntar al primero option usando:

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>

Question 7

Esto debería ayudar:

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>

Question 8

Solo un pequeño comentario:

algunos navegadores Safari no parecen respetar ni el atributo “oculto” ni la configuración de estilo “display:none” (probado con Safari 12.1 bajo MacOS 10.12.6). Sin un texto de marcador de posición explícito, estos navegadores simplemente muestran una primera línea vacía en la lista de opciones. Por lo tanto, puede ser útil proporcionar siempre algún texto explicativo para esta entrada “ficticia”:

<option hidden disabled selected value>(select an option)</option>

Gracias al atributo “deshabilitado”, no se seleccionará activamente de todos modos.

Hoy (2015-02-25)

Anteriormente (2013-08-02)

Futuro

Archivo de prueba

¿Ha sido útil esta solución?