web-dev-qa-db-fra.com

option de sélection par défaut comme vierge

J'ai une exigence très étrange, dans laquelle je ne dois avoir aucune option sélectionnée par défaut dans le menu déroulant 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 effectuer une validation pour gérer la première option. Quelqu'un peut-il m'aider à atteindre cet objectif sans inclure réellement la première option dans la balise select? 

html
347
Pankaj Parashar

Peut-être que cela 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.

Vous pouvez également le cacher en ajoutant une option vide

<option style="display:none">

afin qu'il n'apparaisse plus dans la liste.

Option 2

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

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

774
Gambit

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);
107
Matschie

Aujourd'hui (2015-02-25)

Ceci est valide en HTML5 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 transmet une sorte de caractère d’espace au serveur de la plupart des navigateurs (probablement non souhaitable) et un blanc sur d’autres (Chrome40/Linux passe un blanc):

<option>&#160;</option>

Auparavant (2013-08-02)

Selon mes notes, l'entité d'espace sans rupture dans les balises d'option montrées ci-dessus a généré l'erreur suivante en 2013:

Erreur: service de validation du balisage W3C (public): première option enfant élément d'un élément select avec un attribut obligatoire et sans attribut multiple, et dont la taille est 1, doit avoir soit un vide attribut value ou ne doit pas contenir de texte.

À ce moment-là, un espace normal était valide XHTML4 et envoyait un blanc (et non un espace) au serveur à partir de chaque navigateur:

<option> </option>

Futur

Je serais heureux si la spécification était mise à jour pour autoriser explicitement une option vide. Utilisez de préférence la syntaxe la plus courte. Une des choses suivantes 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>
33
GlenPeterson

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

Il suffit de mettre "masqué" sur l'option que vous souhaitez masquer dans la liste déroulante.

11
Rafael Mori

Solution fonctionnant uniquement à l'aide de 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 sous la main, vous pouvez cibler la première 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>

4
Kai Noack
<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.

3
Fawaz

Utilisez jQuery:

//With jQuery 1.7.2
$("#myDropdown").attr("selectedIndex", -1);

Essayé et testé pour jQuery v1.7.2 (dernière version en date du 18 avril 2012), cependant 'prop' ne fonctionne pas pour cette version.

1
Rahul Desai

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>

1
rohan parab

J'ai trouvé cela très intéressant parce que je venais de vivre la même chose il n'y a pas si longtemps… .. Cependant, j'ai trouvé un exemple sur Internet concernant la solution à ce problème.

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 à tout moment non soumis mais sélectionnable. Plus de commodité pour l'interface utilisateur et une expérience utilisateur améliorée.

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

0
farisfath25

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

J'ai les valeurs d'option 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!

0
LOG Oracle

Juste une petite remarque:

certains navigateurs Safari ne semblent pas respecter l'attribut "caché" ni le style "display: none" (testé avec Safari 12.1 sous MacOS 10.12.6). Sans texte de substitution 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 "disabled", il ne sera de toute façon pas sélectionné activement.

0
Andreas Rozek

Afin d'afficher veuillez sélectionner une valeur dans le menu déroulant et la masquer après la sélection d'une valeur. 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>
0
Bathri Nathan

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.

0
Abhijit pai

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

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

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 option ne possède l'attribut selected et, en pratique, les navigateurs font en sorte que la première option soit présélectionnée.

Pour résoudre ce problème, vous pouvez remplacer l'élément select par un ensemble d'éléments input type=radio (avec le même attribut name). Cela crée un contrôle du même type avec une apparence et une interface utilisateur différentes. Si aucun élément input type=radio ne possède l'attribut checked, aucun d'entre eux n'est initialement sélectionné dans la plupart des navigateurs modernes.

0
Jukka K. Korpela