HTML select: comment définir le texte par défaut qui ne sera pas affiché dans la liste déroulante?

J’ai une select qui affiche d’abord la langue Select jusqu’à ce que l’utilisateur sélectionne une langue. Lorsque l’utilisateur ouvre la sélection, je ne souhaite pas qu’ils voient une option Sélectionner la langue , car ce n’est pas une option.

La solution de Kyle fonctionnait parfaitement bien pour moi, alors j’ai fait mes recherches pour éviter tout Js et CSS, mais juste pour le HTML. L’ajout d’une valeur selected à l’élément que nous voulons voir comme un en-tête l’oblige à afficher en premier lieu un espace réservé. Quelque chose comme:

  

Le balisage complet devrait être le long de ces lignes:

  

Vous pouvez regarder ce violon et voici le résultat:

entrer la description de l'image ici

Si vous ne souhaitez pas que le type de texte fictif apparaisse dans les options une fois que l’utilisateur clique sur la case de sélection, ajoutez simplement l’atsortingbut hidden comme suit:

  

Vérifiez le violon ici et la capture d’écran ci-dessous.

entrer la description de l'image ici

Voici la solution:

  

La manière correcte et sémantique consiste à utiliser une option d’étiquette d’espace réservé :

  • Ajouter un élément d’ option comme premier enfant du select
  • Définir la value = "" à cette option
  • Définir le texte d’espace réservé comme contenu de cette option
  • Ajouter l’atsortingbut required à la select

Cela forcera l’utilisateur à sélectionner une autre option pour pouvoir soumettre le formulaire, et les navigateurs devraient afficher l’ option souhaitée:

Si un élément select contient une option d’étiquette d’espace réservé, l’agent utilisateur doit afficher cette option de manière à indiquer qu’il s’agit d’une étiquette, et non d’une option valide du contrôle.

Cependant, la plupart des navigateurs le rendront comme une option normale. Nous devrons donc le réparer manuellement en ajoutant ce qui suit à l’ option :

  • L’atsortingbut selected , pour le rendre sélectionné par défaut
  • L’atsortingbut disabled , pour le rendre non sélectionnable par l’utilisateur
  • display: none , pour le cacher de la liste des valeurs
 select > .placeholder { display: none; } 
  

Comme vous ne pouvez pas utiliser d’atsortingbuts réservés pour select balises select , je ne pense pas qu’il soit possible de faire exactement ce que vous demandez avec du HTML / CSS pur. Vous pouvez cependant faire quelque chose comme ceci:

  

“Sélectionner la langue” apparaîtra dans la liste déroulante, mais une fois qu’une autre option sera sélectionnée, il ne sera plus possible de la sélectionner à nouveau.

J’espère que ça aide.

Essaye ça:

 

En CSS:

 .selectSelection option:first-child{ display:none; } 

J’ai une solution avec une durée affichée au-dessus de la sélection jusqu’à ce qu’une sélection soit effectuée. L’intervalle affiche le message par défaut et ne figure donc pas dans la liste des propositions:

HTML:

 Default message  

CSS:

 #default_message_overlay { position: absolute; display: block; width: 120px; color: grey; } select { width: 150px; } 

Javascript (avec JQuery):

 $(document).ready(function() { // No selection at start $('#my_select').prop("selectedIndex", -1); // Set the position of the overlay var offset = $('#my_select').offset(); offset.top += 3; offset.left += 3; $('#default_message_overlay').offset(offset); // Remove the overlay when selection changes $('#my_select').change(function() { if ($(this).prop("selectedIndex") != -1) { $('#default_message_overlay').hide(); } }); }); 

J’ai fait un jsfiddle pour la démo . Testé avec Firefox et IE8.

  

vous pouvez bien sûr déplacer le css vers un fichier css si vous le souhaitez et mettre un script pour intercepter le bouton esc pour sélectionner à nouveau le désactivé. Contrairement aux autres réponses similaires, je mets value="" , donc si vous envoyez la ou les valeurs de votre liste de sélection avec un formulaire, celui-ci ne contiendra pas “choisi quelque chose”. En asp.net mvc 5 envoyé en json compilé avec var obj = { prop:$('#ddl').val(),...}; et JSON.ssortingngify(obj); la valeur de prop sera nulle.