web-dev-qa-db-fra.com

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

Je pensais que l'ajout d'un attribut "value" défini sur l'élément <select> ci-dessous entraînerait la sélection du <option> contenant mon "value" fourni 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 élément <option> est sélectionné par défaut?

htmlhtml-select
1158
Jichao

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

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

Si vous voulez avoir un texte par défaut comme une sorte d’espace réservé/indicateur sans être considéré comme une valeur valide (quelque chose comme "compléter ici", "sélectionnez votre pays", etc.), vous pouvez procéder comme suit:

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

418
Nobita

Exemple complet:

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

214
RedFilter

Je suis tombé sur cette question, mais la réponse acceptée et très votée ne me convenait pas. Il s'avère que si vous utilisez React, définir selected ne fonctionne pas.

A la place, vous devez définir une valeur dans la balise <select> 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 pourquoi ici sur la page React .

63
MindJuice

Vous pouvez le faire comme ça:

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

Indiquez le mot clé "selected" dans la balise d'option, que vous souhaitez voir apparaître par défaut dans votre liste déroulante.

Vous pouvez également fournir un attribut à la balise option i.e. 

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

si vous voulez utiliser les valeurs d'un formulaire et le garder dynamique, essayez 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>
47
Florian

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.

35
Chong Lip Phang

Une amélioration pour la réponse de nobita . Vous pouvez également améliorer l'affichage visuel de la liste déroulante en masquant l'élément "Choisissez 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>

27
Salitha Prasad

Un autre exemple; utiliser 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);
16
Ally

L'attribut selected est un attribut booléen.

Lorsqu'il est présent, il 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>
12
tilak

Si vous réagissez, vous pouvez utiliser defaultValue comme attribut au lieu de value dans la balise select.

6
Johan

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

<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
Akshay Vijay Jain

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 fois que la page est chargée (et ce code se trouve à l'intérieur d'un formulaire qui publie), la valeur précédemment sélectionnée est sélectionnée par défaut.

3
Graeme

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

3
X-Coder

Ce code définit la valeur par défaut pour l'élément de sélection HTML 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
Julian

Je voudrais simplement faire de la première valeur 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
Ahmedakhtar11

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.

2
Samim

Moi-même je l'utilise 

<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>
1
Юрий Светлов

Le problème avec <select> est qu'il est parfois déconnecté de l'état de ce qui est actuellement rendu et qu'à moins que quelque chose ait changé dans la liste des options, aucune valeur de changement n'est renvoyée. Cela peut poser 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)" de son propre chef ne le ferait pas. Certaines méthodes décrites ci-dessus utilisent une option fictive pour obliger un utilisateur à modifier une valeur afin de récupérer la première valeur réelle, par exemple en démarrant la liste avec une valeur vide. Remarque: onclick appelle la fonction deux fois, contrairement au code suivant, qui résout le problème pour la première fois.

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

Voici 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>
0
AlexM

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 handicapé?

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

Valeur vide par défaut

Chaque forme de production a une validation, alors la valeur vide ne devrait pas poser de problème. De cette façon, nous pouvons avoir une sélection vide non requise.

Attributs de syntaxe XHTML

La syntaxe selected="selected" est le seul moyen d'être compatible à la fois avec XHTML et HTML 5. C'est une syntaxe XML correcte et certains éditeurs peuvent en être satisfaits. Il est plus compatible avec les versions antérieures. Je ne suis pas du tout convaincu de cela, mais si les arguments ci-dessus sont vos exigences, vous devez suivre la syntaxe complète.

0
Michał Mielec

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

Voici un extrait pour le même et plusieurs exemples de travail 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>

0
Ambuj Khanna