SELECCIONAR HTML en blanco sin elemento en blanco en la lista desplegable

110

¿Cómo implementar subj?

cuando yo escribo:

<form>
  <select>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

entonces el elemento seleccionado predeterminado es "aaaa"

cuando yo escribo:

<form>
  <select>
     <option value=""></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

entonces el elemento seleccionado predeterminado está en blanco, pero este elemento en blanco se presenta en el menú desplegable.

¿Cómo puedo implementar la etiqueta SELECT con el valor en blanco predeterminado que se oculta en la lista desplegable?

Nick Stavrogin
fuente
Posible duplicado de la opción de selección predeterminada en blanco
Blazemonger

Respuestas:

182

Solo use atributos deshabilitados y / u ocultos:

<option selected disabled hidden style='display: none' value=''></option>
  • selected hace que esta opción sea la predeterminada.
  • disabled hace que no se pueda hacer clic en esta opción.
  • style='display: none'hace que esta opción no se muestre en los navegadores más antiguos. Consulte: ¿Puedo usar documentación para atributos ocultos?
  • hidden hace que esta opción no se muestre en la lista desplegable.
Eduardo
fuente
3
En realidad, IE 11 muestra la opción "oculta".
Edward Olamisan
6
Webkit no parece admitir el atributo 'oculto'
Ethan Reesor
2
Como se mencionó en ¿Puedo usar , el hiddenatributo es efectivo display: none, por lo que es compatible con navegadores más antiguos:<option selected disabled hidden style='display: none' value=''></option>
Neta
66

Se puede por ajuste selectedIndexa -1utilizar .prop: http://jsfiddle.net/R9auG/ .

Para versiones anteriores de jQuery, use en .attrlugar de .prop: http://jsfiddle.net/R9auG/71/ .

pimvdb
fuente
@IronicMuffin: Gracias; acaba de probar y, de hecho, parece funcionar en todos los navegadores convencionales.
pimvdb
@zobidafly: Gracias por editar; Lo he elaborado un poco.
pimvdb
1
.attrfallará en las nuevas versiones de jQuery. Intentar ser inteligente me hizo fallar.
Carson Ip
33

Simplemente usando

<option value="" selected disabled>Please select an option...</option>

funcionará en cualquier lugar sin script y le permitirá instruir al usuario al mismo tiempo.

mvreijn
fuente
25
<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
Andrey R
fuente
1
ff / chrome - ok, opera / ie7-9 - no ok, puedes probar eso aquí (con o sin js): jsfiddle.net/R9auG/145, así que recomiendo js-approach por @pimvdb
tibalt
11

Aquí hay una forma sencilla de hacerlo usando JavaScript simple. Este es el equivalente básico del script jQuery publicado por pimvdb. Puedes probarlo aquí .

<script type='text/javascript'>
  window.onload = function(){
    document.getElementById('id_here').selectedIndex = -1;
  }
</script>

.

<select id="id_here">
  <option>aaaa</option>
  <option>bbbb</option>
</select>

Asegúrese de que "id_here" coincida en el formulario y en JavaScript.

Samuel Mingwei
fuente
3

No puedes. Simplemente no funcionan de esa manera. Un menú desplegable debe tener una de sus opciones seleccionada en todo momento.

Podría (aunque no lo recomiendo) observar un evento de cambio y luego usar JS para eliminar la primera opción si está en blanco.

Quentin
fuente
3
¿Por qué no recomiendas este comportamiento?
Josh Noe
Hay muchos casos en los que desea que el usuario elija activamente algo de una lista. No creo que JS sea la forma más óptima de hacerlo (aunque parece ser la única forma), pero realmente creo que debería haber una forma.
qwerty
2

Para puramente html @isherwood tiene una gran solución. Para jQuery, proporcione una ID a su menú desplegable seleccionado y luego selecciónelo con jQuery:

<form>
  <select id="myDropDown">
    <option value="0">aaaa</option>
    <option value="1">bbbb</option>
  </select>
</form> 

Luego use este jQuery para borrar el menú desplegable en la carga de la página:

$(document).ready(function() {
    $('#myDropDown').val(''); 
});

O ponlo dentro de una función por sí mismo:

$('#myDropDown').val(''); 

logra lo que está buscando y es fácil poner esto en funciones que pueden ser llamadas en su página si necesita borrar el menú desplegable sin recargar la página.

Jason Slobotski
fuente
0

Puedes probar este fragmento

$("#your-id")[0].selectedIndex = -1

Funcionó para mí.

Shenbag
fuente
1
Sería mejor proporcionar un jsfiddle.net para acompañar la respuesta a fin de proporcionar una explicación más clara.
Anónimo
1
Esto supone que el OP está usando jQuery.
evanrmurphy