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

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?

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:

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.

Voici la solution:

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

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:

• L' selectedattribut, pour le rendre sélectionné par défaut
• L' disabledattribut, pour le rendre non sélectionnable par l'utilisateur
• display: none, pour le masquer de la liste des valeurs

select > .placeholder {
  display: none;
}

<select required>
  <option class="placeholder" selected disabled value="">Select language</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

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.

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;
}

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.

<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.

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