So erstellen Sie mit JavaScript eine Dropdown-Liste mit Array-Werten

Übersicht

Um die Optionen in der Dropdown-Liste zu erhalten, ohne das Frontend der Webseite zu beeinträchtigen, können Sie ein Array verwenden. Wie in einem Array können wir beliebig viele Optionen oder Werte speichern. Anstatt diese Werte also direkt in den HTML-Teil des Codes im Select-Tag einzufügen, können wir sie aus einem Array rendern, wodurch es einfach ist, weitere Werte hinzuzufügen, ohne die Benutzeroberfläche (UI) der Seite zu beeinträchtigen.

Methode

Dies ist eine sehr einfache Technik. Mit dieser Technik können wir Optionswerte problemlos in unsere Liste einfügen. Durch die Verwendung eines Arrays können wir alle Werte vom Typ String in einer einzigen Variablen speichern, was die Platzkomplexität verringert. Wir haben auch viele Funktionen wie „for“, „foreach“, „map()“. Mit diesen Funktionen können wir das Array iterieren und die Werte rendern.

Grammatik

Die Syntax zum Erstellen einer Dropdown-Liste lautet -

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

Algorithmus

Schritt 1 −HTML-Codevorlage erstellen. Um eine Dropdown-Liste in HTML zu erstellen, verwenden wir das Select-Tag zum Erstellen der Dropdown-Liste und das Option-Tag zum Erstellen der Liste.

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

Schritt 2 − Initialisieren Sie ein Array, das Optionen als Elemente enthält, und erstellen Sie eine leere Variable vom Typ String.

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

Schritt 3 − Nutzen Sie nun die Mapping-Methode des Arrays, die die Werte im Array der Optionsliste der Dropdown-Liste zuordnet. Verwenden Sie die Verkettungstechnik, um Optionen mit Dropdown-Listen zu verbinden.

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

Schritt 4 − Jetzt enthält die Optionsvariable die Liste der Optionen im Array. Zeigt gerenderte Werte aus einem Array in einer Dropdown-Liste an.

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

Schritt 5−Alle gerenderten Optionen werden in der Dropdown-Liste angezeigt und stehen zur Verwendung zur Verfügung.

Beispiel

In diesem Beispiel rendern wir den Wert der Option aus einem Array. Mit der Funktion map() haben wir das Array mithilfe von Optionsmarkierungen durchlaufen und es mit einer Variablen vom Typ String verkettet. Wir verwenden die Methode innerHTML(), um die Ausgabe im Select-Tag anzuzeigen.

   


   
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>

Das Bild unten zeigt die Ausgabe des obigen Beispiels. Dies soll uns nur zeigen, wie man ein Array als Liste von Optionen in HTML rendert. Wenn Sie es also interaktiver gestalten möchten, können wir die Bootstrap-Komponente verwenden, die das Styling schöner macht.

Fazit

Diese Methode ist die beste Möglichkeit, Optionswerte in Dropdown-Listen darzustellen. Der Hauptvorteil davon besteht darin, dass es dynamischer Natur ist, was die Manipulation des Arrays erleichtert, was bedeutet, dass wir Optionen einfach aktualisieren, dem Array hinzufügen oder daraus entfernen können. Da wir eine Liste mit Optionen erstellt haben, folgt diese strikt dem Grundsatz „Don't Repeat Yourself“ (D-R-Y). Es funktioniert als Komponente und kann überall auf einer Webseite gerendert werden, sodass nur ein gewisser Entwicklungsaufwand für die Benutzeroberfläche (UI) erforderlich ist.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit JavaScript eine Dropdown-Liste mit Array-Werten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!