J'ai une exigence très étrange, dans laquelle je dois faire en sorte qu'aucune option ne soit sélectionnée par défaut dans un menu déroulant en HTML. Cependant,
Je ne peux pas l'utiliser,
<select>
<option></option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>Car, pour cela, je devrai faire une validation pour gérer la première option. Quelqu'un peut-il m'aider à atteindre cet objectif sans inclure la première option dans la balise select ?
Peut-être que ceci sera utile
<select>
<option disabled selected value> -- select an option -- </option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>-- select an option -- Sera affiché par défaut. Mais si vous choisissez une option, vous ne pourrez pas la sélectionner à nouveau.
Vous pouvez également le masquer en ajoutant un fichier vide de type option
<option style="display:none">
pour qu'il n'apparaisse plus dans la liste.
Option 2
Si vous ne voulez pas écrire de CSS et attendre le même comportement que la solution ci-dessus, utilisez simplement :
<option hidden disabled selected value> -- select an option -- </option>
@azerafati comme @Rafael_Mori l'a souligné vous pouvez archiver la même chose en utilisant l'attribut "hidden", donc pas de CSS nécessaire. Juste du pur HTML5 ;) <option hidden disabled selected value> -- select an option -- </option>
Et si je veux pouvoir le sélectionner à nouveau ? Je veux juste qu'il n'envoie rien. Est-ce possible ?
Vous pouvez utiliser Javascript pour y parvenir. Essayez le code suivant :
HTML
<select id="myDropdown">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select> JS
document.getElementById("myDropdown").selectedIndex = -1;ou JQuery
$("#myDropdown").prop("selectedIndex", -1);
Cette solution fonctionne partiellement avec Chrome 35 : la liste déroulante n'affiche aucune sélection lorsque la liste d'options est invisible, mais affiche la première option sélectionnée lorsque la liste d'options est rendue visible. Safari 7 se comporte comme prévu.
Ce qui est intéressant, c'est que cela fonctionne avec la validation des formulaires HTML. Si vous utilisez la balise required de l'attribut select et soumettre sans sélectionner une option, la validation du formulaire échouera et vous indiquera que vous devez effectuer une sélection. C'est pourquoi j'aime beaucoup cette approche. (Du moins, testée dans Chrome)
Ne fonctionne pas (du moins dans les navigateurs actuels au moment de la rédaction de cet article) et repose inutilement sur le javascript.
Il s'agit d'un code HTML5 valide qui envoie un blanc (et non un espace) au serveur :
<option label=" "></option>Validité vérifiée le http://validator.w3.org/check
Comportement vérifié avec Win7(IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10(Chrome40, FF35) OSX_Yosemite(Safari8, Chrome40) Android(Samsung-Galaxy-S5)
Le texte suivant passe également la validation aujourd'hui mais transmet au serveur une sorte d'espace dans la plupart des navigateurs (ce qui n'est probablement pas souhaitable) et un blanc dans d'autres (Chrome40/Linux transmet un blanc) :
<option> </option>D'après mes notes, l'entité non-breaking-space à l'intérieur des balises d'option présentées ci-dessus a produit l'erreur suivante en 2013 :
Erreur : Service de validation de balisage du W3C (public) : Le premier élément enfant option enfant d'un élément select avec un attribut required et sans attribut multiple multiple, et dont la taille est 1, doit avoir soit un attribut value vide, soit un contenu textuel nul. vide, ou ne doit pas avoir de contenu textuel.
À l'époque, un espace normal était un XHTML4 valide et envoyait un blanc (et non un espace) au serveur à partir de chaque navigateur :
<option> </option>Je serais heureux si la spécification était mise à jour pour permettre explicitement une option vide. De préférence en utilisant la syntaxe la plus brève possible. L'une ou l'autre des options suivantes serait parfaite :
<option />
<option></option><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>
<body>
<form action="index.html" method="post">
<select name="sel">
<option label=" "></option>
</select>
</form>
</body>
</html>
<td><b>Field Label:</b><br>
<select style='align:left; width:100%;' id='some_id' name='some_name'>
<option hidden selected>Select one...</option>
<option value='Value1'>OptLabel1</option>
<option value='Value2'>OptLabel2</option>
<option value='Value3'>OptLabel3</option></select>
</td>Il suffit de mettre "hidden" sur l'option que vous souhaitez masquer dans la liste déroulante.
Une solution qui fonctionne en utilisant uniquement les CSS :
A : CSS en ligne
<select>
<option style="display:none;"></option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>B : Feuille de style CSS
Si vous avez un fichier CSS à portée de main, vous pouvez cibler la première option option en utilisant :
select.first-opt-hidden option:first-of-type {
display:none;
}
<select class="first-opt-hidden">
<option></option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
3 votes
Pour autant que je sache, c'est le seul moyen d'obtenir une ligne vide. Comment ça, vous devez faire une validation ? Il suffit de définir un contrôle pour dire que si value="", il faut renvoyer false.
2 votes
Ce serait une bonne occasion d'utiliser des boutons radio au lieu d'une liste déroulante.
22 votes
Ce n'est pas une exigence bizarre du tout, à mon avis. Je suis dans le même bateau. J'ai également besoin d'une option par défaut "sans option". J'ai plusieurs listes déroulantes qui ne sont pas nécessaires pour soumettre un formulaire. En les désactivant de cette manière, j'évite que l'utilisateur ait à faire une sélection lorsqu'elle n'est pas pertinente. Bonne question ! +1
2 votes
Ce n'est pas une exigence bizarre, si le SELECT a un attribut REQUIRED, alors avoir une option d'étiquette de remplacement est une exigence du HTML5. dev.w3.org/html5/spec-preview/
2 votes
@Blazemonger les boutons radio sont une idée terrible si vous avez plus de 3 ou 4. Imaginez une liste déroulante avec plus de 15 options, ou 50 ou plus ? Ces listes ont leurs propres problèmes de conception dans de nombreux cas, mais le problème reste le même : les boutons radio ne sont pas adaptés. du tout .