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

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?

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

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

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>

Exemple complet:

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

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 .

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>

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>

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.

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>

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.

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

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> 

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

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>

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.

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

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>

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.

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>

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>

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>

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

veuillez voir l'exemple ci-dessous

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

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>

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

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>

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>

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
});

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>