459

Tengo un requisito muy extraño, en el que se me exige que no tenga ninguna opción seleccionada de forma predeterminada en el menú desplegable en HTML. Sin embargo,

No puedo usar esto

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

Expandir fragmento

Porque para esto tendré que hacer una validación para manejar la primera opción. ¿Alguien puede ayudarme a lograr este objetivo sin incluir realmente la primera opción como parte de la etiqueta select?

html Pankaj Parashar
fuente

2

Hasta donde 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 un cheque para decir si value = "" luego devuelve falso.

Robert

1

Esta sería una buena oportunidad para usar botones de radio en lugar de un menú desplegable.

Blazemonger

99

No es un requisito extraño en absoluto, en mi opinión. Estoy en el mismo barco. Necesito un valor predeterminado 'sin opción' también. Tengo varios menús desplegables que no se requieren 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

Scott

No es un requisito extraño, si SELECT 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

Los botones de radio de @Blazemonger son una idea terrible si tiene más de 3 o 4. ¿Imagine 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 radio no escalan bien en absoluto .

TylerH

1015

Quizás 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á por defecto. 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">

así 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>

Gambito
fuente

15

Aquí hay un JSFiddle de lo anterior , en caso de que alguien lo necesite.

Uwe Keim

26

@azerafati como @Rafael_Mori señaló que puede archivar lo mismo utilizando el atributo "oculto", por lo que no se requiere CSS. Solo HTML5 puro;)<option hidden disabled selected value> -- select an option -- </option>

BrainOverflow

¿Qué sucede si quiero poder volver a seleccionarlo? Simplemente no quiero que envíe nada. ¿Es posible?

Michael Rogers

1

¡agregar un atributo oculto al elemento de opción hizo la magia para mí! No esperaba que fuera tan fácil. gracias

S. Domeng

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

113

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);

Matschie
fuente

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

Lo interesante es: esto funciona con la validación de formularios HTML. Si usa el requiredatributo en el selectelemento y lo envía sin seleccionar una opción, la validación del formulario fallará y se lo indicará, debe hacer una selección. Por lo tanto, me gusta mucho este enfoque. (Al menos probado en Chrome)

Andreas Linnert

No funciona (al menos en los navegadores actuales a partir de este escrito, y se basa innecesariamente en javascript.

Silentmouth

1

A partir de 2019, solo Safari IOS 10 se niega a jugar a la pelota con esto

Ayyash

37

Hoy (25/02/2015)

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

<option label=" "></option>

Validez verificada en 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 hoy , pero también pasa algún tipo de carácter de espacio al servidor de 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)

Según mis notas, la entidad que no se rompe el espacio dentro de las etiquetas de opción mostradas anteriormente 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 seleccionado 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 si la especificación se actualizara para permitir explícitamente una opción en blanco. Preferiblemente usando 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>

GlenPeterson
fuente

15

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

Expandir fragmento

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

Rafael Mori
fuente

8

Solución que funciona solo usando CSS:

A: CSS en línea

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

Expandir fragmento

B: hoja de estilo CSS

Si tiene un archivo CSS a mano, puede orientar el primero optionusando:

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>

Expandir fragmento

Kai Noack
fuente

4

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>

Expandir fragmento

rohan parab
fuente

Esta es la forma más moderna (html5) de lograr este requisito, tenga en cuenta que esto requiere un botón type = submit. Un botón type = con un controlador de envío onclick no requiere automáticamente que el usuario realice una selección.

Arjan

3

<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Puede evitar la validación personalizada en este caso.

Fawaz
fuente

2

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 en 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 un 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.

Andreas Rozek
fuente

1

Entiendo lo que estás tratando de hacer. La mejor y más exitosa forma es:

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>

Guryash Singh
fuente

1

Lo encontré realmente interesante porque acabo de experimentar lo mismo no hace mucho tiempo. Sin embargo, encontré un ejemplo en Internet sobre la solución con respecto a esto.

Sin más preámbulos, vea el fragmento de código a continuación:

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 3</option>
</select>

Con eso, no se podrá enviar pero se podrá seleccionar en cualquier momento. Más comodidad para la interfaz de usuario y excelente para la experiencia del usuario.

Bueno, eso es todo, espero que ayude. ¡Salud!

farisfath25
fuente

Por lo que es incapaz de someterse, sino también llamar la atención del usuario en el menú desplegable parece redundante, pero me gusta la sugerencia

Iofacture

@lofacture: gracias por el aporte. en realidad, el código que escribí era el que quería, pero sí, como dijiste, depende de las necesidades del usuario / propietario

farisfath25

0

No hay una solución HTML. Según la especificación HTML 4.01, el comportamiento del navegador no está definido si ninguno de los optionelementos tieneselected atributo, y lo que hacen los navegadores en la práctica es que seleccionen la primera opción preseleccionada.

Como solución alternativa, puede reemplazar el selectelemento por un conjunto de input type=radioelementos (con el mismo nameatributo). Esto crea un control del mismo tipo, aunque con una apariencia e interfaz de usuario diferentes. Si ninguno de los input type=radioelementos tiene el checkedatributo, ninguno de ellos se selecciona inicialmente en la mayoría de los navegadores modernos.

Jukka K. Korpela
fuente

0

Estoy usando el framework Laravel 5 y la respuesta de @Gambi también funcionó para mí, pero con algunos cambios para mi proyecto.

Tengo los valores de opción en una tabla de base de datos y los uso con una declaración foreach. Pero antes de la declaración, agregué una opción con la configuración sugerida de @Gambit y funcionó.

Aquí mi ejemplo:

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset

Espero que esto ayude a alguien también. ¡Sigan con el buen trabajo!

LOG Oracle
fuente

0

Prueba esto:

<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>

La primera opción en el menú desplegable estaría en blanco.

Abhijit pai
fuente

0

Para mostrar , seleccione un valor en el menú desplegable y escóndelo después de seleccionar algún valor. por favor use el siguiente código.

También admitirá la validación requerida.

<select class="form-control" required>
<option disabled selected value style="display:none;">--Please select a value</option>
              <option >Data 1</option>
              <option >Data 2</option>
              <option >Data 3</option>
</select>

Expandir fragmento

Bathri Nathan
fuente

0

Si está utilizando Angular (2+), (o cualquier otro marco), podría agregar algo de lógica. La lógica sería: solo mostrar una opción vacía si el usuario aún no seleccionó ninguna otra. Entonces, después de que el usuario selecciona una opción, la opción vacía desaparece.

Para Angular (9) esto se vería así:

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>

Mike de Klerk
fuente

-2

Prueba esto:

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

Valida en HTML5. Funciona con requiredatributo en el elemento seleccionado. Se puede volver a seleccionar. Funciona en Google Chrome 45, Internet Explorer 11, Edge, Firefox 41.

Tristan Bailey
fuente

opción de selección predeterminada como en blanco

Respuestas:

Hoy (25/02/2015)

Anteriormente (2013-08-02)

Futuro

Archivo de prueba