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

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

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.

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

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.

<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>

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.

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.

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.

Puedes probar este fragmento

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

Funcionó para mí.