Texte par défaut qui ne sera pas affiché dans la liste déroulante


108

J'ai un selectqui affiche initialement Sélectionner la langue jusqu'à ce que l'utilisateur sélectionne une langue. Lorsque l'utilisateur ouvre la sélection, je ne veux pas qu'elle affiche une option de sélection de langue , car ce n'est pas une option réelle.

Comment puis-je atteindre cet objectif?

Réponses:


214

La solution de Kyle a parfaitement fonctionné pour moi, alors j'ai fait mes recherches afin d'éviter tout Js et CSS, mais en m'en tenant simplement au HTML. L'ajout d'une valeur de selectedà l'élément que nous voulons voir apparaître comme un en-tête le force à s'afficher en premier lieu comme un espace réservé. Quelque chose comme:

<option selected disabled>Choose here</option>

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

<select>
    <option selected disabled>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

Vous pouvez jeter un œil à ce violon , et voici le résultat:

entrez la description de l'image ici

Si vous ne souhaitez pas que le type de texte d'espace réservé apparaisse dans les options une fois qu'un utilisateur clique sur la zone de sélection, ajoutez simplement l' hiddenattribut comme suit:

<select>
    <option selected disabled hidden>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

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

entrez la description de l'image ici


C'est une excellente réponse, mais lorsque vous utilisez Angular JS, cela ne fonctionne pas car Angular ajoute automatiquement une option vide et la définit par défaut
Dennis Wanyonyi

Quoi qu'il en soit, juste pour référence, voici comment vous feriez dans Angular, combinez simplement l'approche ci-dessus avec le spécifique Angular expliqué ici metaltoad.com/blog
Nobita

Notez que l' hiddenattribut , utilisé dans la réponse ci-dessus, est un attribut qui peut être défini sur n'importe quel élément HTML, et est généralement (mais pas nécessairement) implémenté pour être équivalent à un paramètre display: noneavec CSS.
Mark Amery

2
Notez également que le réglage hiddensur un optiondans a selectne fonctionne pas dans Safari, sur iOS ou Mac. Cette réponse n'offre donc qu'une prise en charge partielle du navigateur.
Mark Amery

1
C'est beau!
Fibo Kowalsky

59

Voici la solution:

<select>
    <option style="display:none;" selected>Select language</option>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

5
Notez que ce selected="true"n'est pas valide. Utilisez plutôt selected="selected"en (X) HTML ou simplement selecteden HTML. Il semble que vous avez confondu l' selectedattribut avec la selectedpropriété, qui est modifiée comme ceci: myOption.selected = true;oumyOption.selected = false;
Oriol

2
"display: none" est ignoré par les navigateurs qui utilisent des sélections natives de l'appareil comme Android et iOS. Vous devez supprimer l'option du DOM dans select.focus et la retourner et la sélectionner dans select.blur pour qu'elle fonctionne.
Radek Pech

-1; comme la réponse de Nobita en utilisanthidden (qui est "généralement implémentée en CSS" en utilisant de display: nonetoute façon), utiliser display: nonesur un optionne fonctionne pas dans Safari; l'option apparaît toujours.
Mark Amery

50

La manière appropriée et sémantique consiste à utiliser une option d'étiquette d'espace réservé :

  • Ajouter un optionélément en tant que premier enfant duselect
  • Réglez à celavalue= ""option
  • Définissez le texte d'espace réservé comme contenu de celui-ci option
  • Ajoutez l' requiredattribut auselect

Cela obligera l'utilisateur à sélectionner une autre option afin de pouvoir soumettre le formulaire, et les navigateurs doivent afficher le optioncomme souhaité:

Si un élément select contient une option d'étiquette d'espace réservé, l'agent utilisateur est censé afficher cette option d'une manière qui indique qu'il s'agit d'une étiquette, plutôt que d'une option valide du contrôle.

Cependant, la plupart des navigateurs le rendront normalement option. Nous devrons donc le réparer manuellement, en ajoutant ce qui suit au option:

select > .placeholder {
  display: none;
}
<select required>
  <option class="placeholder" selected disabled value="">Select language</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>


Il convient de noter que même cela (qui est la tentative la plus approfondie de résoudre ce problème parmi toutes les réponses ici) ne fonctionne pas sur Safari, que ce soit sur iOS ou Mac. L'option sera toujours lorsque la sélection est ouverte.
Mark Amery

@MarkAmery Je vous suggère de faire comme il est proposé dans @Nobita answer et d'ajouter simplement l' hiddenattribut à la balise d'option d'espace réservé au lieu de display: nonecar il semble que la plupart des navigateurs mobiles ignorent l' display: noneattribut CSS et c'est encore plus sémantiquement correct à mon avis.
Gaboik1

@ Gaboik1 Dans les commentaires sur cette réponse, j'ai noté qu'elle hiddenest généralement implémentée comme display: nonesous le capot (et la spécification le suggère explicitement comme une implémentation "typique"). En tant que tel, je serais surpris s'il y avait des navigateurs - mobiles ou autres - hiddenfonctionnant mais display: nonepas. Pouvez-vous donner un exemple?
Mark Amery

21

Parce que vous ne pouvez pas utiliser d'attribuer des espaces réservés pour les selectbalises, je ne pense pas qu'il existe un moyen de faire exactement ce que vous demandez avec du HTML / CSS pur. Vous pouvez cependant faire quelque chose comme ceci:

<select>
  <option disabled="disabled">Select language</option>
  <option>Option 1</option>
</select>

"Sélectionner la langue" apparaîtra dans la liste déroulante, mais une fois qu'une autre option est sélectionnée, il ne sera pas possible de la resélectionner.

J'espère que cela aide.


2
J'ai trouvé que le meilleur est la combinaison de désactivé et sélectionné avec style = "display: none;". disabled est utile lorsque vous souhaitez effectuer une validation - cela garantit qu'aucune option activée n'est sélectionnée par défaut.
Illarion Kovalchuk

-1 car d'autres réponses ici (notamment celles de Nobtia et d'Oriol) fournissent à la fois des détails beaucoup plus explicatifs et des solutions beaucoup plus complètes.
Mark Amery

7

Essaye ça:

<div class="selectSelection">
    <select>
        <option>Do not display</option>
        <option>1</option>
        <option>1</option>
    </select>
</div>

Dans le CSS:

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

Cette réponse ne contient rien que les autres réponses ne contiennent pas plus en détail, en plus elle a un mauvais formatage; -1.
Mark Amery

5

J'ai une solution avec une plage affichée au-dessus de la sélection jusqu'à ce qu'une sélection soit effectuée. Le span affiche le message par défaut, et il n'est donc pas dans la liste des propositions:

HTML:

<span id="default_message_overlay">Default message</span>
<select id="my_select">
    <option value="1">Option 1</option>  
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

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 une démo . Testé avec Firefox et IE8.


Chrome sur OSX affiche toujours la première option sélectionnée, mais elle semble être spécifique à OSX, car toutes les solutions proposées ici mènent à la sélection de la première option visible.
Gamadril

au lieu de spanlà utiliser legendet ce serait parfait oulabel
karlcow

C'est une approche intéressante, et la seule façon possible que je vois de faire fonctionner ce comportement sur Safari, mais elle est mal implémentée ici; vous avez au moins besoin pointer-events: nonesur votre étendue pour permettre aux clics de passer pour sélectionner.
Mark Amery

0
<option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option>

vous pouvez bien sûr déplacer le css vers un fichier css si vous le souhaitez, et mettre un script pour attraper le escbouton pour sélectionner à nouveau le désactivé. Contrairement aux autres réponses similaires que j'ai mises value="", c'est le cas si vous envoyez la ou les valeurs de votre liste de sélection avec un formulaire, elle ne contiendra pas "a choisi quelque chose". Dans asp.net mvc 5 envoyé en tant que json compilé avec var obj = { prop:$('#ddl').val(),...};et JSON.stringify(obj);la valeur de prop sera nulle.


0

Op1:

$("#MySelectid option").each(function () {
        if ($(this).html() == "text to find") {
            $(this).attr("selected", "selected");
            return;
        }
});

Op2:

$('#MySelectid option')
.filter(function() { return $.trim( $(this).text() ) == 'text to find'; })​​​​​​​​.attr('selected','selected');​​​​​​​
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.