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

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>

Answer 2

Juste une petite remarque :

certains navigateurs Safari ne semblent respecter ni l'attribut "hidden" ni le paramètre de style "display:none" (testé avec Safari 12.1 sous MacOS 10.12.6). Sans texte de remplacement explicite, ces navigateurs affichent simplement une première ligne vide dans la liste d'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.

Answer 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.

Answer 4

Je comprends ce que vous essayez de faire. Le meilleur moyen et le plus efficace est :

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>

Answer 5

J'ai trouvé cela très intéressant car j'ai vécu la même chose il n'y a pas si longtemps. Cependant, je suis tombé sur un exemple sur Internet concernant la solution à ce problème.

Sans plus attendre, voyez 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 intransmissible mais sélectionnable, à tout moment. Plus pratique pour l'interface utilisateur et excellent pour l'expérience utilisateur.

C'est tout, j'espère que ça vous aidera. A la vôtre !