Pankaj Parashar
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?
gam6itko
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>
-
Aquí hay un JSFiddle de lo anterior.por si alguien lo necesita.
– Uwe Keim
15 de marzo de 2016 a las 9:33
-
@azerafati como @Rafael_Mori señaló que puede archivar lo mismo usando el atributo “oculto”, por lo que no se requiere CSS. Solo HTML5 puro;)
<option hidden disabled selected value> -- select an option -- </option>
– BrainOverflow
26 de marzo de 2017 a las 11:43
-
¿Qué pasa si quiero poder seleccionarlo de nuevo? Simplemente no quiero que envíe nada. ¿Es posible?
–Michael Rogers
9 de marzo de 2019 a las 18:39
-
Tenga en cuenta que tanto el atributo oculto como el estilo de visualización no funcionan en IE, incluso 11. stackoverflow.com/questions/58862242/…
– yatskovsky
11 de abril de 2020 a las 16:22
-
¿Qué hace el valor en blanco?
– Sebastián Tomás
11/06/2020 a las 17:00
Matschie
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);
-
Esta solución funciona parcialmente con Chrome 35: el menú desplegable no muestra ninguna selección cuando la lista de opciones es invisible, pero muestra la primera opción seleccionada cuando la lista de opciones se hace visible. Sin embargo, Safari 7 se comporta según lo previsto.
– flochtililoch
7 julio 2014 a las 21:25
-
Lo interesante es que esto funciona con la validación de formularios HTML. Si usas el
required
atributo en elselect
elemento y enviar sin seleccionar una opción, la validación del formulario fallará y le indicará que debe realizar una selección. Por lo tanto, me gusta mucho este enfoque. (Al menos probado en Chrome)– Andreas Linnert
11 de febrero de 2017 a las 10:28
-
No funciona (al menos en los navegadores actuales a partir de este escrito, y se basa innecesariamente en javascript.
– boca silenciosa
18 mayo 2018 a las 19:40
-
A partir de 2019, solo Safari IOS 10 se niega a jugar a la pelota con este
– Ayyash
1 de julio de 2019 a las 18:22
GlenPeterson
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> </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>
rafael mori
<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.
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>
Uwe Keim
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>
Andreas Rosek
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.
Hasta donde yo sé, esta es la única forma de obtener una línea en blanco. ¿Qué quiere decir que tendrá que hacer la validación? Simplemente configure una marca para decir if value=”” y luego devuelva falso.
– Roberto
22 de diciembre de 2011 a las 14:50
Esta sería una buena oportunidad para usar botones de radio en lugar de un menú desplegable.
– Blazemonger
27/10/2015 a las 20:37
No es un requisito extraño en absoluto, en mi opinión. Estoy en el mismo barco. También necesito un valor predeterminado de ‘sin opción’. Tengo varios menús desplegables que no son necesarios para enviar un formulario. Deshabilitarlos de esta manera evita que el usuario tenga que hacer una selección cuando no es pertinente. ¡Buena pregunta! +1
– Gran Scott
13 de enero de 2016 a las 22:26
No es un requisito extraño, si SELECCIONAR tenía un atributo REQUERIDO, entonces tener una opción de etiqueta de marcador de posición es un requisito de HTML5 dev.w3.org/html5/spec-preview/…
– Testo Testini
19 de enero de 2017 a las 16:22
Los botones de radio @Blazemonger son una idea terrible si tiene más de 3 o 4. ¿Imagina una lista desplegable con más de 15 opciones, o 50 o más? Esos tienen sus propios problemas de diseño en muchos casos, pero el problema sigue siendo que los botones de opción no escalan bien en absoluto.
– TylerH
28 de marzo de 2019 a las 16:43