option de sélection par défaut comme vide

Question

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 ?

Answer 1

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 éléments suivants n'est disponible option Les éléments ont le selected et ce que les navigateurs font en pratique, c'est qu'ils présélectionnent la première option.

Comme solution de contournement, vous pouvez remplacer l'option select par un ensemble de input type=radio (avec les mêmes name attribut). 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 Les éléments ont le checked aucun d'entre eux n'est initialement sélectionné dans la plupart des navigateurs modernes.

Answer 2

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

J'ai les valeurs des options dans une table de base de données et je les utilise avec une instruction foreach. Mais avant l'instruction, 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 aidera quelqu'un d'autre. Continuez à faire du bon travail !

Answer 3

Essayez ç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 de la liste déroulante serait vide.

Answer 4

Afin de montrer veuillez sélectionner une valeur dans la liste déroulante et le cacher après qu'une valeur soit 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>

Answer 5

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

Pour Angular (9), cela ressemblerait à quelque chose comme ceci :

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