Comment créer une liste déroulante contenant des valeurs de tableau à l'aide de JavaScript

Vue d'ensemble

Pour obtenir les options de la liste déroulante sans interférer avec le front-end de la page Web, vous pouvez utiliser un tableau. Comme dans un tableau, nous pouvons stocker n’importe quel nombre d’options ou de valeurs. Ainsi, au lieu de mettre ces valeurs directement dans la partie HTML du code dans la balise select, nous pouvons les restituer à partir d'un tableau, ce qui facilite l'ajout de valeurs supplémentaires sans perturber l'interface utilisateur (UI) de la page.

Méthode

Il s'agit d'une technique très simple en utilisant cette technique, nous pouvons facilement restituer les valeurs d'option dans notre liste. En utilisant un tableau, nous pouvons stocker toutes les valeurs de type String dans une seule variable, ce qui réduira la complexité spatiale. Nous avons également de nombreuses fonctions comme « for », « foreach », « map() » en utilisant ces fonctions, nous pouvons parcourir le tableau et restituer les valeurs.

Grammaire

La syntaxe pour créer une liste déroulante est -

<select name="" id="">
   <option value=""></option>
   <option value=""></option>
</select>

Algorithme

Étape 1 −Créez un modèle de code HTML. Pour créer une liste déroulante en HTML, nous utilisons la balise select pour créer la liste déroulante et la balise option pour créer la liste.

<select>
   <option></option>
   <option></option>
</select>

Étape 2 − Initialisez un tableau contenant des options en tant qu'éléments et créez une variable de type String vide.

var arr = ["Courses here","Frontend Training","Backend Training","Java Training","Ethical Hacking"];

Étape 3 − Utilisez maintenant la méthode de mappage du tableau, qui mappe les valeurs du tableau à la liste d'options de la liste déroulante. Utilisez la technique de concaténation pour connecter les options aux listes déroulantes.

arr.map((op,i)=>{
   options+=`<option value="${op}" id="${i}" style="border-radius: 5px;"">${op}</option>`
})

Étape 4 − Maintenant, la variable options contient la liste des options dans le tableau. Affiche les valeurs rendues d'un tableau dans une liste déroulante.

document.getElementById("arrayDropdown").innerHTML=options;

Étape 5−Toutes les options de rendu apparaîtront dans la liste déroulante et pourront être utilisées.

Exemple

Dans cet exemple, nous restituons la valeur de l'option à partir d'un tableau. À l'aide de la fonction map(), nous avons parcouru le tableau à l'aide de marqueurs d'option et l'avons concaténé avec une variable de type String. Nous utilisons la méthode innerHTML() pour afficher la sortie dans la balise select.

   


   
Dropdown list with array rendered options
   
   <script>
      var arr = [&quot;Courses here&quot;,&quot;Frontend Training&quot;,&quot;Backend Training&quot;,&quot;Java Training&quot;,&quot;Ethical Hacking&quot;];
      var options="";
      arr.map((op,i)=>{
         options+=`<option value="${op}" id="${i}" style="border-radius: 5px;"">${op}</option>`
      })
      document.getElementById(&quot;arrayDropdown&quot;).innerHTML=options;
   </script>

L'image ci-dessous montre le résultat de l'exemple ci-dessus. C'est juste pour nous montrer comment restituer un tableau en HTML sous forme de liste d'options. Donc, si vous souhaitez le rendre plus interactif, nous pouvons utiliser le composant bootstrap, qui rend le style plus beau.

Conclusion

Cette méthode est la meilleure façon de présenter les valeurs des options de la liste déroulante. Le principal avantage est qu’il est de nature dynamique, ce qui facilite la manipulation du tableau, ce qui signifie que nous pouvons facilement mettre à jour, ajouter ou supprimer des options du tableau. Puisque nous avons créé une liste d’options, elle suit strictement Don’t Repeat Yourself (D-R-Y). Il fonctionne comme un composant et peut être affiché n'importe où sur une page Web, ne nécessitant qu'un certain développement d'interface utilisateur (UI).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!