Comment définir une description par défaut non sélectionnable dans un menu select (drop-down) en HTML?

j'ai une liste déroulante où l'utilisateur sélectionne une langue:

<select>
    <option>English</option>
    <option>Spanish</option>
</select>
  1. je veux l'option par défaut qui s'affiche pour dire "Sélectionnez une langue "au lieu de "Anglais" (ma première option, affichée par défaut.)
  2. je ne veux pas que l'utilisateur puisse sélectionner "Sélectionner une langue".
32
demandé sur JBallin 2011-03-06 22:48:46

6 réponses

si aucune des options de select n'a un selected l'attribut, la première option sera celle sélectionnée.

pour sélectionner une option par défaut qui n'est pas le premier, ajouter un selected attribut à cette option:

<option selected="selected">Select a language</option>

Vous pouvez lire les HTML 4.01 spec concernant les valeurs par défaut dans l'élément select.

je suggère de lire un bon livre HTML si vous avez besoin d'apprendre les bases de HTML comme ceci - je recommande Head First HTML.

45
répondu Oded 2011-03-06 19:58:32

en S'appuyant sur la réponse D'Oded, vous pouvez également définir l'option par défaut mais pas en faire une option sélectionnable si c'est juste du texte fictif. Par exemple, vous pourriez faire:

<option selected="selected" disabled="disabled">Select a language</option>

cela afficherait "Select a language" avant que l'utilisateur clique sur la boîte select mais l'utilisateur ne serait pas en mesure de la sélectionner en raison de l'attribut disabled.

55
répondu Glen Selle 2014-06-04 10:57:38 

.selectmenu{
  
	-webkit-appearance: none;  /*Removes default chrome and safari style*/
	-moz-appearance: none; /* Removes Default Firefox style*/
	background: #0088cc ;
	width: 200px; /*Width of select dropdown to give space for arrow image*/
	text-indent: 0.01px; /* Removes default arrow from firefox*/
	text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
	color: #FFF;
	border-radius: 2px;
	padding: 5px;
    border:0 !important;
	box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
}
.hideoption { display:none; visibility:hidden; height:0; font-size:0; }
Try this html

<select class="selectmenu">
<option selected disabled class="hideoption">Select language</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
5
répondu Ashok 2015-07-10 03:36:57

Juste faire l'option n ° 1 Sélectionner la Langue:

Démonstration

3
répondu Myles Gray 2011-03-06 19:51:15 
<option value="" selected disabled hidden>Default Text</option>

laisser le drapeau désactivé dans les empêche de ne pas sélectionner une option et le drapeau caché le supprimera de la liste. Dans mon cas je l'utilise avec un enum liste et le concept tient le même

<select asp-for="Property" asp-items="Html.GetEnumSelectList<PropertyEnum>()">
                        <option value="" selected disabled hidden>Select Property Enum</option>
                        <option value=""></option>
                    </select>
0
répondu Chris 2017-07-12 20:36:43

Mettez votre invite dans le 1er option et le désactiver:

<selection>
    <option disabled selected>”Select a language”</option>
    <option>English</option>
    <option>Spanish</option>
</selection>

la première option sera automatiquement la valeur par défaut sélectionnée (ce que vous voyez en premier lorsque vous regardez la liste déroulante) mais en ajoutant le selected l'attribut est plus claire et réellement nécessaire lorsque le premier champ est un champ désactivé.

disabled l'attribut fera l'option non sélectionnable/grisé.

d'Autres réponses suggèrent paramètre disabled=“disabled” mais c'est seulement nécessaire si vous devez analyser comme XHTML, qui est essentiellement une version plus stricte de HTML. disabled sur elle est allumée est assez pour HTML standard.

I f vous voulez faire la sélection "requis" (sans accepter l'option "Choisir une langue" comme réponse acceptée):

Ajouter required l'attribut selection et de la première optionvalue vide ””.

<selection required>
    <option disabled value=“”>Select a language</option>
    <option>English</option>
    <option>Spanish</option>
</selection>
0
répondu JBallin 2018-01-12 22:16:06