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:
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.
Voici la solution:
La manière correcte et sémantique consiste à utiliser une option d’étiquette d’espace réservé :
option
comme premier enfant du select
value
= ""
à cette option
option
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
:
selected
, pour le rendre sélectionné par défaut 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.