SELECT HTML vierge sans élément vide dans la liste déroulante

Comment implémenter subj?

quand j'écris:

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

alors l'élément sélectionné par défaut est "aaaa"

quand j'écris:

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

alors l'élément sélectionné par défaut est vide, mais cet élément vide se présente dans la liste déroulante.

Comment puis-je implémenter la balise SELECT avec une valeur vide par défaut masquée dans la liste déroulante?

Utilisez simplement des attributs désactivés et / ou masqués:

<option selected disabled hidden style='display: none' value=''></option>

• selected fait de cette option celle par défaut.
• disabled rend cette option non cliquable.
• style='display: none'rend cette option non affichée dans les anciens navigateurs. Voir: Puis-je utiliser la documentation pour l'attribut masqué.
• hidden fait que cette option ne soit pas affichée dans la liste déroulante.

Vous pouvez par le réglage selectedIndexà l' -1aide .prop: http://jsfiddle.net/R9auG/ .

Pour les anciennes versions de jQuery, utilisez à la .attrplace de .prop: http://jsfiddle.net/R9auG/71/ .

Utiliser simplement

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

fonctionnera n'importe où sans script et vous permettra d'instruire l'utilisateur en même temps.

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

Voici un moyen simple de le faire en utilisant du JavaScript brut. C'est l'équivalent vanille du script jQuery posté par pimvdb. Vous pouvez le tester ici .

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

Assurez-vous que le "id_here" correspond au formulaire et au JavaScript.

Vous ne pouvez pas. Ils ne fonctionnent tout simplement pas de cette façon. Un menu déroulant doit avoir l'une de ses options sélectionnée à tout moment.

Vous pouvez (bien que je ne le recommande pas) surveiller un événement de modification , puis utiliser JS pour supprimer la première option si elle est vide.

Pour purement HTML, @isherwood a une excellente solution. Pour jQuery, donnez à votre liste déroulante un identifiant, puis sélectionnez-le avec jQuery:

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

Ensuite, utilisez ce jQuery pour effacer la liste déroulante lors du chargement de la page:

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

Ou mettez-le dans une fonction par lui-même:

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

accomplit ce que vous recherchez et il est facile de mettre cela dans des fonctions qui peuvent être appelées sur votre page si vous avez besoin de vider la liste déroulante sans recharger la page.

Vous pouvez essayer cet extrait

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

Cela a fonctionné pour moi.