option de sélection par défaut vide

459

J'ai une exigence très bizarre, dans laquelle je dois n'avoir aucune option sélectionnée par défaut dans le 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>
Développer l'extrait

Parce que, pour cela, je devrai faire une validation pour gérer la première option. Quelqu'un peut-il m'aider à atteindre cet objectif sans vraiment inclure la première option dans le tag de sélection?

html 
— Pankaj Parashar
source
2
Pour autant que je sache, c'est le seul moyen d'obtenir une ligne vierge. Que voulez-vous dire que vous devrez faire la validation? Il suffit de cocher pour dire si value = "" puis retourner false.
— Robert
1
Ce serait une bonne occasion d'utiliser des boutons radio au lieu d'une liste déroulante.
— Blazemonger
9
Pas une exigence bizarre du tout, à mon avis. Je suis dans le meme bateau. J'ai également besoin d'une option «sans option». J'ai plusieurs listes déroulantes qui ne sont pas nécessaires pour soumettre un formulaire. Les désactiver de cette manière empêche l'utilisateur d'avoir à faire une sélection lorsqu'elle n'est pas pertinente. Bonne question! +1
— Scott
Pas une exigence étrange, si le SELECT avait un attribut REQUIS, alors avoir une option d'étiquette d'espace réservé est une exigence de HTML5 dev.w3.org/html5/spec-preview/…
— Testo Testini
Les boutons radio @Blazemonger sont une idée terrible si vous en avez plus de 3 ou 4. Imaginez une liste déroulante avec plus de 15 options, ou 50 ou plus? Ceux-ci ont leurs propres problèmes de conception dans de nombreux cas, mais le problème persiste: les boutons radio ne sont pas du tout bien adaptés .
— TylerH

Réponses:

1015

Ce sera peut-être 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 à l'aide en ajoutant un vide option

<option style="display:none">

donc il n'apparaîtra plus dans la liste.

Option 2

Si vous ne voulez pas écrire CSS et attendez le même comportement de la solution ci-dessus, utilisez simplement:

<option hidden disabled selected value> -- select an option -- </option>

— Gambit
source
15
Voici un JSFiddle de ce qui précède , au cas où quelqu'un en aurait besoin.
— Uwe Keim
26
@azerafati comme @Rafael_Mori l'a souligné, vous pouvez l'archiver en utilisant l'attribut "caché", donc aucun CSS n'est requis. Juste HTML5 pur;)<option hidden disabled selected value> -- select an option -- </option>
— BrainOverflow
Et si je veux pouvoir le sélectionner à nouveau? Je ne veux juste pas qu'il envoie quoi que ce soit. C'est possible?
— Michael Rogers
1
l'ajout d'un attribut caché à l'élément option a fait la magie pour moi! ne s'attendait pas à ce que ce soit aussi facile. merci
— S. Domeng
Soyez conscient, les attributs cachés et le style d'affichage ne fonctionnent pas dans IE, même 11. stackoverflow.com/questions/58862242/…
— yatskovsky
113

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);
— Matschie
source
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 cependant comme prévu.
— flochtililoch
La chose intéressante est: cela fonctionne avec la validation de formulaire HTML. Si vous utilisez l' requiredattribut sur l' selectélément et soumettez sans sélectionner d'option, la validation du formulaire échouera et vous le dira, vous devez faire une sélection. Par conséquent, j'aime vraiment cette approche. (Au moins testé dans Chrome)
— Andreas Linnert
Ne fonctionne pas (au moins dans les navigateurs actuels au moment d'écrire ces
— lignes
1
À partir de 2019, seul Safari IOS 10 refuse de jouer au ballon avec cela
— Ayyash
37

Aujourd'hui (25/02/2015)

Ceci est du HTML5 valide et envoie un blanc (pas un espace) au serveur:

<option label=" "></option>

Validité vérifiée sur 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)

Ce qui suit passe également la validation aujourd'hui , mais passe également une sorte de caractère d'espace au serveur de la plupart des navigateurs (probablement pas souhaitable) et un blanc sur les autres (Chrome40 / Linux passe un blanc):

<option>&#160;</option>

Auparavant (2013-08-02)

Selon mes notes, l'entité insécable à l'intérieur des balises d'option ci-dessus a produit l'erreur suivante en 2013:

Erreur: Service de validation du balisage W3C (public): le premier élément d'option enfant d'un élément select avec un attribut requis et sans attribut multiple, et dont la taille est 1, doit avoir soit un attribut de valeur vide, soit aucun contenu textuel.

À ce moment-là, un espace régulier était XHTML4 valide et envoyait un blanc (pas un espace) au serveur depuis chaque navigateur:

<option> </option>

Avenir

Cela me ferait plaisir si la spécification était mise à jour pour autoriser explicitement une option vide. Utiliser de préférence la syntaxe la plus brève. L'un ou l'autre des éléments suivants serait formidable:

<option />
<option></option>

Fichier de test

<!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>
— GlenPeterson
source
15 

<td><b>Ação da atividade:</b><br>
	<select style='align:left; width:100%;' id='cbxTipoSFA' name='cbxTipoSFA'>
	<option hidden selected>Selecione uma opção</option>
	<option value='Instalação'>Instalação</option>
	<option value='Solicitação'>Solicitação</option>
	<option value='Retirada'>Retirada</option></select>
</td>
Développer l'extrait

Mettez simplement "caché" sur l'option que vous souhaitez masquer dans la liste déroulante.

— Rafael Mori
source
8

Solution qui fonctionne uniquement en utilisant CSS:

A: CSS en ligne

<select>
    <option style="display:none;"></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>
Développer l'extrait

B: Feuille de style CSS

Si vous avez un fichier CSS à portée de main, vous pouvez cibler le premier en optionutilisant:

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>
Développer l'extrait

— Kai Noack
source
4

Cela devrait aider:

https://www.w3schools.com/tags/att_select_required.asp

 <form>
 <select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="submit">Submit</button>
</form>
Développer l'extrait

— rohan parab
source
C'est la façon la plus moderne (html5) d'atteindre cette exigence, sachez que cela nécessite un bouton type = submit. Un bouton type = avec un gestionnaire de soumission onclick ne nécessite pas automatiquement que l'utilisateur fasse une sélection.
— Arjan
3 
<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Vous pouvez éviter la validation personnalisée dans ce cas.

— Fawaz
source
2

Juste une petite remarque:

certains navigateurs Safari ne semblent respecter ni l'attribut "caché" ni le paramètre de style "display: none" (testé avec Safari 12.1 sous MacOS 10.12.6). Sans texte d'espace réservé explicite, ces navigateurs affichent simplement une première ligne vide dans la liste des options. Il peut donc être utile de toujours fournir un texte explicatif pour cette entrée "factice":

<option hidden disabled selected value>(select an option)</option>

Grâce à l'attribut "désactivé", il ne sera de toute façon pas sélectionné activement.

— Andreas Rozek
source
1

Je comprends ce que vous essayez de faire, la meilleure et la plus réussie est:

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>
— Guryash Singh
source
1

Je l'ai trouvé vraiment intéressant parce que je viens de vivre la même chose il n'y a pas si longtemps. Cependant, je suis tombé sur un exemple sur Internet de la solution à ce sujet.

Sans plus tarder, voir le fragment de code ci-dessous:

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 3</option>
</select>

Avec cela, il restera non soumis mais sélectionnable, à tout moment. Plus de confort pour l'interface utilisateur et idéal pour l'expérience utilisateur.

C'est tout, j'espère que ça aide. À votre santé!

— farisfath25
source
Le rendre incapable de soumettre mais aussi attirer l'attention de l'utilisateur sur la liste déroulante semble redondant, mais j'aime la suggestion
— Iofacture
@lofacture: merci pour l'entrée. en fait, le code que j'ai écrit était celui que je voulais, mais oui, comme vous l'avez dit, cela dépend des besoins de l'utilisateur / propriétaire
— farisfath25
0

Il n'y a pas de solution HTML. Selon la spécification HTML 4.01, le comportement du navigateur n'est pas défini si aucun des optionéléments n'a l' selectedattribut, et ce que les navigateurs font en pratique, c'est qu'ils font la première option présélectionnée.

Comme solution de contournement, vous pouvez remplacer l' selectélément par un ensemble d' input type=radioéléments (avec le même nameattribut). Cela crée un contrôle du même type mais avec une apparence et une interface utilisateur différentes. Si aucun des input type=radioéléments n'a l' checkedattribut, aucun d'entre eux n'est initialement sélectionné dans la plupart des navigateurs modernes.

— Jukka K. Korpela
source
0

J'utilise le framework Laravel 5 et la réponse de @Gambi a également fonctionné pour moi, mais avec quelques modifications pour mon projet.

J'ai les valeurs d'options dans une table de base de données et je les utilise avec une instruction foreach. Mais avant la déclaration, j'ai ajouté une option avec les paramètres suggérés par @Gambit et cela a fonctionné.

Voici mon exemple:

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset

J'espère que cela aide aussi quelqu'un. Continuez votre bon travail!

— LOG Oracle
source
0

Essaye ça:

<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>

La première option dans la liste déroulante serait vide.

— Abhijit pai
source
0

Pour afficher, veuillez sélectionner une valeur dans le menu déroulant et la masquer après qu'une certaine valeur ait été sélectionnée. veuillez utiliser le code ci-dessous.

il prendra également en charge la validation requise.

<select class="form-control" required>
<option disabled selected value style="display:none;">--Please select a value</option>
              <option >Data 1</option>
              <option >Data 2</option>
              <option >Data 3</option>
</select>
Développer l'extrait

— Bathri Nathan
source
0

Si vous utilisez Angular (2+), (ou tout autre framework), vous pouvez ajouter de la logique. La logique serait: n'afficher une option vide que si l'utilisateur n'en a pas encore sélectionné d'autre. Ainsi, une fois que l'utilisateur a sélectionné une option, l'option vide disparaît.

Pour Angular (9), cela ressemblerait à ceci:

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>
— Mike de Klerk
source
-2

Essaye ça:

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

Valide en HTML5. Fonctionne avec l' requiredattribut dans l'élément select. Peut être resélectionné. Fonctionne dans Google Chrome 45, Internet Explorer 11, Edge, Firefox 41.

— Tristan Bailey
source
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.