Comment puis-je définir la valeur par défaut d'un élément HTML <select>?


1459

Je pensais que l'ajout d'un "value"ensemble d'attributs sur l' <select>élément ci-dessous entraînerait la sélection du <option>contenant my fourni "value"par défaut:

<select name="hall" id="hall" value="3">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Cependant, cela n'a pas fonctionné comme je m'y attendais. Comment définir quel <option>élément est sélectionné par défaut?


Wow, cette question est si utile et elle est littéralement devenue virale haha
finnmglas

Réponses:


2152

Définissez selected="selected"l'option que vous souhaitez utiliser par défaut.

<option selected="selected">
3
</option>

19
<option value = "3" selected = "selected"> 3 </option> La valeur serait transmise sous forme de chaîne lorsque l'option 3 est sélectionnée.
Sree Rama

5
Et continuez à utiliser l'attribut id pour <Select> et il n'est pas bon d'utiliser l'attribut value pour <select> l'élément html.
Sree Rama

216
La partie = "sélectionné" n'est pas nécessaire. Juste <option sélectionnée> fera comme mentionné dans les autres réponses.
MindJuice

56
@MindJuice Ce que j'ai écrit est du HTML / XML polyglotte valide. L'utilisation de <option sélectionnée> est acceptable pour un navigateur, mais peut entraîner le rejet du document par d'autres analyseurs. Je trouve pratique de pouvoir utiliser XPath / XSLT sur des documents Web à l'occasion.
Borealid

70
Si vous utilisez Angulaire, notez que cela ng-modelremplace la valeur sélectionnée par défaut (même si non définie si vous n'avez pas défini l'objet lié). Il m'a fallu un certain temps pour comprendre que c'était la raison pour laquelle l' selected="selected"option n'était pas sélectionnée.
metakermit

626

Dans le cas où vous souhaitez avoir un texte par défaut comme une sorte d'espace réservé / indice mais pas considéré comme une valeur valide (quelque chose comme "compléter ici", "sélectionnez votre nation" etc.), vous pouvez faire quelque chose comme ceci:

<select>
  <option value="" selected disabled hidden>Choose here</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>


61
Je pense que c'est ce que la plupart des gens recherchent. Bonne réponse.
chrisallick

1
C'était un jsfiddle externe où le css était juste nécessaire pour ne pas le faire apparaître le long de la bordure de l'écran. Après quelques mois, il a été modifié en un extrait de code en ligne et le gars qui l'a édité l'a simplement conservé dans l'exemple. Vous pouvez le modifier et le supprimer de l'extrait de code s'il vous dérange vraiment.
Nobita

Une solution encore meilleure consiste à utiliser l' hiddenattribut à la place. Voir la réponse de @ chong-lip-phang ci-dessous: stackoverflow.com/a/39358987/1192426
Ivan Akulov

<option value="" selected disabled hidden>Choose here</option>

1
Réponse géniale!
japes Sophey

234

Exemple complet:

<select name="hall" id="hall"> 
  <option> 
    1 
  </option> 
  <option> 
    2 
  </option> 
  <option selected> 
    3 
  </option> 
  <option> 
    4 
  </option> 
  <option> 
    5 
  </option> 
</select> 


11
C'est plus simple que d'utiliser selected = "selected".
Rodrigo

57
selected = "selected" devrait fonctionner pour tous les doctypes. XHTML n'aime pas les attributs sans valeurs.
ps2goat

14
@Rodrigo Est-ce vraiment si difficile à écrire selected="selected"? Je veux dire, qu'économisez-vous? Temps? Taille? C'est négligeable et s'il rend le code plus "conforme", pourquoi ne pas le faire ?
xDaizu

15
@ DanielParejoMuñoz, ok, c'est négligeable. Mais si mon doctype est html, et non xhtml, pourquoi gaspiller un octet?
Rodrigo

5
selected = "selected" ressemble à une erreur. Dans quelques mois, je le changerais probablement en selected = "3" en pensant que cela signifie que l'élément 3 est sélectionné. (et casser ma page)
Paul McCarthy

92

Je suis tombé sur cette question, mais la réponse acceptée et très appréciée n'a pas fonctionné pour moi. Il se trouve que si vous utilisez React, la configurationselected ne fonctionne pas.

Au lieu de cela, vous devez définir une valeur dans la <select>balise directement comme indiqué ci-dessous:

<select value="B">
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

En savoir plus sur les raisons ici sur la page React .


2
Vous pouvez définir une option présélectionnée dans une liste déroulante en utilisant l' valueattribut de la <select>balise, c'est <select value="3">-à- dire , mais elle n'est pas valide dans le validateur W3C.
Apôtre

4
D'accord, mais ce n'est pas du HTML, c'est du JSX, donc il n'a pas besoin de suivre les règles du W3C. Le code HTML généré par React à la fin est cependant valide.
MindJuice

Dans un monde parfait, cela avait été un commentaire à la question, car ce n'était pas une réponse valable. Mais je suppose qu'il a suffisamment de valeur pour rester.
Justus Romijn

2
J'avais besoin d'une solution similaire à la suggestion ci-dessus, mais avec JQuery au lieu de React. Au cas où cela aiderait quelqu'un à l'avenir:$("select").each(function(){ $(this).find('option[value="'+$(this).attr("value")+'"]').prop('selected', true); });
CDK

Cette réponse n'est pas valide, la question sous-jacente parle de HTML et non de React (JSX).
Aaron C

72

Vous pouvez le faire comme ceci:

<select name="hall" id="hall">
    <option> 1 </option>
    <option> 2 </option>
    <option selected> 3 </option>
    <option> 4 </option>
    <option> 5 </option>
</select> 

Fournissez le mot-clé "sélectionné" à l'intérieur de la balise d'option, que vous souhaitez voir apparaître par défaut dans votre liste déroulante.

Ou vous pouvez également fournir un attribut à la balise d'option, c'est-à-dire

<option selected="selected">3</option>

13
Juste pour être clair, la norme w3 est <option selected = "selected"> 3 </option>
htmldrum

40
@JRM Je pense que ce que vous voulez dire, c'est que si votre document doit être conforme à XHTML, un attribut doit avoir une valeur. En HTML, il n'est pas nécessaire de "sélectionné = sélectionné". Les exemples sur w3.org/wiki/HTML/Elements/select , developer.mozilla.org/en-US/docs/HTML/Element/select ne spécifient pas de valeur. La chose importante à noter est que ce selected="false"n'est pas autorisé et le selected=""rend également sélectionné. La seule façon de faire une option non sélectionnée est de supprimer l'attribut. w3.org/html/wg/drafts/html/master/…
Juan Mendes

3
Je ne comprends jamais comment des questions comme celle-ci sont votées. Ils sont EXACTEMENT comme la bonne réponse pour le moment .. 2 ans plus tard lol
Phil

52

si vous voulez utiliser les valeurs d'un formulaire et le garder dynamique essayez ceci avec php

<form action="../<SamePage>/" method="post">


<?php
    $selected = $_POST['select'];
?>

<select name="select" size="1">

  <option <?php if($selected == '1'){echo("selected");}?>>1</option>
  <option <?php if($selected == '2'){echo("selected");}?>>2</option>

</select>
</form>

40

Je préfère ça:

<select>
   <option selected hidden>Choose here</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
   <option value="4">Four</option>
   <option value="5">Five</option>
</select>

«Choisir ici» disparaît après la sélection d'une option.


1
J'ai essayé mais "Choisir ici" ne s'affiche pas. La première option est vide
Bogdan Mates

Quel navigateur utilisez-vous?
Chong Lip Phang

J'utilise la version 52.0.2743.116 m du navigateur Google Chrome
Bogdan Mates

2
J'utilise également ce navigateur et je ne rencontre aucun problème.
Chong Lip Phang

2
Pensez à ajouter value=""pour vous assurer d'obtenir une valeur vide.
Ryan Walton

31

Une amélioration pour la réponse de nobita . Vous pouvez également améliorer la vue visuelle de la liste déroulante en masquant l'élément «Choisir ici».

<select>
  <option selected disabled hidden>Choose here</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>


25

Le meilleur moyen à mon avis:

<select>
   <option value="" selected="selected" hidden="hidden">Choose here</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
   <option value="4">Four</option>
   <option value="5">Five</option>
</select>

Pourquoi pas désactivé?

Lorsque vous utilisez l'attribut désactivé avec <button type="reset">Reset</button> valeur n'est pas réinitialisé à l'espace réservé d'origine. Au lieu de cela, le navigateur choisit la première option non désactivée, ce qui peut entraîner des erreurs de l'utilisateur.

Valeur vide par défaut

Chaque formulaire de production a une validation, alors la valeur vide ne devrait pas être un problème. De cette façon, nous pouvons avoir vide non sélectionné sélectionner.

Attributs de syntaxe XHTML

selected="selected"la syntaxe est le seul moyen d'être compatible avec XHTML et HTML 5. C'est une syntaxe XML correcte et certains éditeurs peuvent en être satisfaits. Il est plus rétrocompatible. Je n'ai pas un sentiment fort à ce sujet, mais si les arguments mentionnés ci-dessus sont vos exigences, vous devez suivre la syntaxe complète.


Cela me cache toute l'option
ADEL NAMANI

@ADELNAMANI Pourriez-vous fournir le lien vers votre code? Je suppose que votre problème n'est pas lié à ma réponse.
Michał Mielec

19

Un autre exemple; en utilisant JavaScript pour définir une option sélectionnée.

(Vous pouvez utiliser cet exemple pour boucler un tableau de valeurs dans un composant déroulant)

<select id="yourDropDownElementId"><select/>

// Get the select element
var select = document.getElementById("yourDropDownElementId");
// Create a new option element
var el = document.createElement("option");
// Add our value to the option
el.textContent = "Example Value";
el.value = "Example Value";
// Set the option to selected
el.selected = true;
// Add the new option element to the select element
select.appendChild(el);

cela ne devrait-il pas être el.selected = "selected";conforme à la norme w3?
7yl4r

5
@ 7yl4r No. selectedest une propriété booléenne telle que définie par w3c - w3.org/TR/html401/interact/forms.html `17.6.1 Options présélectionnées sélectionnées [CI] - Lorsqu'il est défini, cet attribut booléen spécifie que cette option est présélectionné. »Pour plus d'informations sur l'utilisation, voir écoles w3c - w3schools.com/jsref/prop_option_selected.asp
Ally

14

le sélectionnés attribut est un attribut booléen.

Lorsqu'elle est présente, elle spécifie qu'une option doit être présélectionnée lors du chargement de la page.

L'option présélectionnée sera affichée en premier dans la liste déroulante.

<select>
  <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="vw">VW</option>
 <option value="audi" selected>Audi</option> 
</select> 

10

Si vous êtes en réaction, vous pouvez utiliser defaultValuecomme attribut plutôt que valuedans la balise de sélection.


7

Si vous utilisez select avec angular 1, vous devez utiliser ng-init, sinon, la deuxième option ne sera pas sélectionnée car, ng-model remplace la valeur par défaut sélectionnée

<select ng-model="sortVar" ng-init='sortVar="stargazers_count"'>
  <option value="name">Name</option>
  <option selected="selected" value="stargazers_count">Stars</option>
  <option value="language">Language</option>
</select>

4

J'ai utilisé cette fonction php pour générer les options et l'insérer dans mon HTML

<?php
  # code to output a set of options for a numeric drop down list
  # parameters: (start, end, step, format, default)
  function numericoptions($start, $end, $step, $formatstring, $default)
  {
    $retstring = "";
    for($i = $start; $i <= $end; $i = $i + $step)
    {
      $retstring = $retstring . '<OPTION ';
      $retstring = $retstring . 'value="' . sprintf($formatstring,$i) . '"';
      if($default == $i)
      {
        $retstring = $retstring . ' selected="selected"';
      }
      $retstring = $retstring . '>' . sprintf($formatstring,$i) . '</OPTION> ';
    }

  return $retstring;
  }

?>

Et puis dans mon code de page Web, je l'utilise comme ci-dessous;

<select id="endmin" name="endmin">
  <?php echo numericoptions(0,55,5,'%02d',$endmin); ?>
</select>

Si $ endmin est créé à partir d'une variable _POST à ​​chaque chargement de la page (et que ce code se trouve dans un formulaire qui publie), la valeur précédemment sélectionnée est sélectionnée par défaut.


4

l'attribut value de la balise est manquant, il ne s'affiche donc pas comme vous le souhaitez. Par défaut, la première option s'affiche lors du chargement de la page déroulante, si l'attribut value est défini sur la balise .... J'ai résolu mon problème de cette façon


4

Ce code définit la valeur par défaut de l'élément HTML select avec PHP.

<select name="hall" id="hall">
<?php
    $default = 3;
    $nr = 1;
    while($nr < 10){
        if($nr == $default){
            echo "<option selected=\"selected\">". $nr ."</option>";
        }
        else{
            echo "<option>". $nr ."</option>";
        }
        $nr++;
    }
?>
</select>

3

Vous pouvez utiliser:

<option value="someValue" selected>Some Value</option>

au lieu de,

<option value="someValue" selected = "selected">Some Value</option>

les deux sont également corrects.


3

Je voudrais simplement faire de la première option de sélection la valeur par défaut et masquer cette valeur dans le menu déroulant avec la nouvelle fonctionnalité "cachée" de HTML5. Comme ça:

   <select name="" id="">
     <option hidden value="default">Select An Option</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
     <option value="4">Four</option>
   </select>

2

Je l'utilise moi-même

<select selected=''>
    <option value=''></option>
    <option value='1'>ccc</option>
    <option value='2'>xxx</option>
    <option value='3'>zzz</option>
    <option value='4'>aaa</option>
    <option value='5'>qqq</option>
    <option value='6'>wwww</option>
</select>

2

Vous avez juste besoin de mettre l'attribut "sélectionné" sur une option particulière au lieu de diriger directement pour sélectionner l'élément.

Voici un extrait d'un exemple de travail identique et multiple avec des valeurs différentes.

   Select Option 3 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option>2</option>
    <option selected="selected">3</option>
    <option>4</option>
    <option>5</option>
   </select>
   
   <br/>
   <br/>
   <br/>
   Select Option 5 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option selected="selected">5</option>
   </select>
   
    <br/>
   <br/>
   <br/>
   Select Option 2 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option selected="selected">2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
   </select>


2

Set selected = "selected" where is option value is 3

veuillez voir l'exemple ci-dessous

<option selected="selected" value="3" >3</option>

Sur Firefox, cela ne fonctionnera pas lors du rechargement de la page
Sebastian

sur mon système son travail sur firefox
Akbor

1

Le problème avec <select>, c'est qu'il est parfois déconnecté de l'état de ce qui est actuellement rendu et à moins que quelque chose n'ait changé dans la liste d'options, aucune valeur de changement n'est retournée. Cela peut être un problème lorsque vous essayez de sélectionner la première option dans une liste. Le code suivant peut obtenir la première option la première fois sélectionnée, mais onchange="changeFontSize(this)"ne le serait pas par lui-même. Il existe des méthodes décrites ci-dessus utilisant une option fictive pour forcer un utilisateur à modifier une valeur pour récupérer la première valeur réelle, comme démarrer la liste avec une valeur vide. Remarque: onclick appellera la fonction deux fois, le code suivant ne le fait pas, mais résout le premier problème.

<label>Font Size</label>
<select name="fontSize" id="fontSize" onfocus="changeFontSize(this)" onchange="changeFontSize(this)">           
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
    <option value="extraLarge">Extra large</option>
</select>

<script>
function changeFontSize(x){
    body=document.getElementById('body');
    if (x.value=="extraLarge") {
        body.style.fontSize="25px";
    } else {
        body.style.fontSize=x.value;
    }
}
</script>

1

J'utilise Angular et j'ai défini l'option par défaut en

Modèle HTML

<select #selectConnection [(ngModel)]="selectedVal" class="form-control  col-sm-6 "  max-width="100px"   title="Select" 
      data-size="10"> 
        <option  >test1</option>
        <option >test2</option>      
      </select>

Scénario:

sselectedVal:any="test1";

0

Voilà comment je l'ai fait ...

<form action="../<SamePage>/" method="post">

<?php
    if ( $_POST['drop_down'] == "")
    {
    $selected = "";
    }
    else
    {
    $selected = "selected";
    }
?>

<select name="select" size="1">

  <option value="1" <?php $selected ?>>One</option>
     ////////  OR  ////////
  <option value="2" $selected>Two</option>

</select>
</form>

4
Il semble y avoir une certaine incongruité dans cette solution. Si le nom de l'élément est "select", la clé de variable $ _POST ne devrait-elle pas être "select" - d'où vient "drop_down"? En outre, en supposant qu'il s'agissait d'une erreur, et que cela vérifie en fait la variable $ _POST ['select'] pour une valeur, toute valeur non vide renverra true, et donc tous les éléments <option> seront marqués "sélectionnés". Peut-être que je manque quelque chose d'intégrale à cette réponse?
Ryan

0

Vous pouvez essayer comme ça

  <select name="hall" id="hall">
      <option>1</option>
      <option>2</option>
      <option selected="selected">3</option>
      <option>4</option>
      <option>5</option>
    </select>

0

Extrait HTML:

<select data-selected="public" class="form-control" name="role">
    <option value="public">
        Pubblica
    </option>
    <option value="user">
        Utenti
    </option>
    <option value="admin">
        Admin
    </option>
</select>

Extrait JavaScript natif:

document.querySelectorAll('[data-selected]').forEach(e => {
   e.value = e.dataset.selected
});

0
Upstream System:
<select name=upstream id=upstream>
<option value="SYBASE">SYBASE ASE
<option value="SYBASE_IQ">SYBASE_IQ
<option value="SQLSERVER">SQLSERVER
</select>
<script>
var obj=document.getElementById("upstream");
for (var i=0;i<obj.length;i++){if(obj.options[i].value==="SYBASE_IQ")obj.selectedIndex=i;}
</script>
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.