web-dev-qa-db-fra.com

SELECT HTML vide 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 est présenté dans une liste déroulante.

comment je peux implémenter une balise SELECT avec une valeur vide par défaut cachée dans une liste déroulante?

htmlselectdrop-down-menu
109
Nick Stavrogin

Il suffit d'utiliser des attributs désactivés et/ou cachés:

<option selected disabled hidden style='display: none' value=''></option>
  • selected fait de cette option la valeur 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 documentation pour l'attribut masqué.
  • hidden fait que cette option ne soit pas affichée dans la liste déroulante.
181
Eduardo

Vous pouvez définir selectedIndex sur -1 à l'aide de .prop: http://jsfiddle.net/R9auG/ .

Pour les versions jQuery plus anciennes, utilisez .attr au lieu de .prop: http://jsfiddle.net/R9auG/71/ .

65
pimvdb

Simplement en utilisant

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

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

30
mvreijn
<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
25
Andrey R

Voici un moyen simple de le faire en utilisant JavaScript. 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 "id_here" correspond dans le formulaire et dans le JavaScript.

11
Mingwei Samuel

Tu ne peux pas. Ils ne fonctionnent tout simplement pas de cette façon. Une des options du menu déroulant doit toujours être sélectionnée.

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

3
Quentin

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

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

Ensuite, utilisez cette requête jQuery pour effacer le menu déroulant au chargement de la page:

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

Ou mettez-le dans une fonction en soi:

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

accomplit ce que vous recherchez et il est facile de placer cela dans des fonctions qui peuvent être appelées sur votre page si vous devez effacer le menu déroulant sans recharger la page.

2
Jason Slobotski

Vous pouvez essayer cet extrait

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

Cela a fonctionné pour moi.

0
Shenbag