Ein Dropdown-Menü basierend auf der Auswahl in einem anderen mit JavaScript füllen

Wenn Sie vor der Aufgabe stehen, die Optionen in einem Dropdown-Menü basierend auf der Auswahl in einem anderen dynamisch zu aktualisieren, ist dies der Fall wichtig, um unnötige Komplexitäten wie Datenbankabfragen zu vermeiden. Sehen wir uns eine unkomplizierte JavaScript-basierte Lösung an, die dies ohne die Notwendigkeit von AJAX-Aufrufen erreicht.

Um diesen Ansatz zu veranschaulichen, stellen Sie sich ein Szenario vor, in dem Sie zwei Dropdown-Listen haben: Dropdown A mit Optionen wie „Farben“, „ Formen“, „Namen“ und Dropdown B. Wir möchten die Optionen in Dropdown B basierend auf der in Dropdown A getroffenen Auswahl füllen.

Beispiel Code

Die folgende JavaScript-Funktion zeigt, wie diese Funktionalität erreicht wird:

function configureDropDownLists(ddl1, ddl2) {
  var colours = ['Black', 'White', 'Blue'];
  var shapes = ['Square', 'Circle', 'Triangle'];
  var names = ['John', 'David', 'Sarah'];

  switch (ddl1.value) {
    case 'Colours':
      ddl2.options.length = 0;
      for (i = 0; i 
HTML-Markup
Das folgende HTML-Markup enthält zwei Dropdown-Listen:
ColoursShapesNames
Usage
Um diese Funktionalität zu nutzen, rufen Sie einfach die Funktion configureDropDownLists auf und übergeben Sie das erste Dropdown-Menü (ddl1) und das zweite Dropdown-Menü (ddl2). als Argumente. Die Funktion verarbeitet das dynamische Auffüllen von Dropdown B basierend auf der in Dropdown A getroffenen Auswahl.
Dieses Codefragment zeigt eine vollständig funktionierende Lösung, die es Ihnen ermöglicht, ein Dropdown-Menü basierend auf der in einem anderen mithilfe von JavaScript getroffenen Auswahl dynamisch zu füllen , ohne dass Datenbankaufrufe oder AJAX-Anfragen erforderlich sind.