web-dev-qa-db-fra.com

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

J'ai une select qui affiche initialement Sélectionnez la langue jusqu'à ce que l'utilisateur sélectionne une langue. Lorsque l'utilisateur ouvre la sélection, je ne veux pas qu'ils voient une option Sélectionnez langue , car ce n'est pas une option.

htmlhtml-select
88
Vitalii Ponomar

La solution de Kyle a parfaitement fonctionné pour moi alors j'ai fait mes recherches afin d'éviter tout Js et CSS, mais je m'en tiens à HTML . Ajouter une valeur de selected à l'élément que nous souhaitons apparaître comme un en-tête à montrer en premier lieu comme un espace réservé. Quelque chose comme:

<option selected disabled>Choose here</option>

Le balisage complet devrait suivre les lignes suivantes:

<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 oeil à ce violon , et voici le résultat:

 enter image description here

Si vous ne voulez pas que le type de texte fictif apparaisse dans les options une fois qu'un utilisateur a cliqué sur la case de sélection, ajoutez simplement l'attribut hidden 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.

 enter image description here

183
Nobita

Voici la solution:

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

La manière correcte et sémantique utilise une option de libellé espace réservé :

  • Ajouter un option element en tant que premier enfant de la select
  • Définissez value= "" à cette option
  • Définissez le texte de l'espace réservé comme contenu de cette option
  • Ajoutez l'attribut required à la select

Cela obligera l'utilisateur à sélectionner une autre option pour pouvoir soumettre le formulaire. Les navigateurs doivent restituer la option comme souhaité:

Si un élément select contient une option d'étiquette d'espace réservé, l'utilisateur l’agent doit rendre cette option de manière à indiquer que c'est une étiquette plutôt qu'une option valide du contrôle.

Cependant, la plupart des navigateurs le rendront comme une option normale. Nous devrons donc résoudre ce problème manuellement, en ajoutant ce qui suit à la variable 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>

45
Oriol

Parce que vous ne pouvez pas utiliser d'attributs réservés pour les balises select, je ne crois 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:

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

"Select language" apparaîtra dans le menu déroulant, mais une fois qu'une autre option est sélectionnée, il ne sera pas possible de la resélectionner.

J'espère que ça aide.

19
Kyle

Essaye ça:

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

En CSS:

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

J'ai une solution avec une étendue affichée au-dessus du select jusqu'à ce qu'une sélection soit effectuée. Le span affiche le message par défaut, il ne figure 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 demo . Testé avec Firefox et IE8.

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

vous pouvez bien sûr déplacer le fichier css vers un fichier css si vous le souhaitez et placer un script pour intercepter le bouton esc afin de sélectionner à nouveau le mode désactivé. Contrairement aux autres réponses similaires que j'ai mises value="", il en est ainsi si vous envoyez la (les) valeur (s) de votre liste de sélection avec un formulaire, elle ne contiendra pas "chose choisie". Dans asp.net, mvc 5 envoyé sous forme de fichier json compilé avec var obj = { prop:$('#ddl').val(),...}; et JSON.stringify(obj);, la valeur de prop sera nulle.

0
Anders M.

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');​​​​​​​
0
Ed Manz