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

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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la source

option de sélection par défaut vide

Réponses:

Aujourd'hui (25/02/2015)

Auparavant (2013-08-02)

Avenir

Fichier de test