Auffüllen von Dropdown-Listen basierend auf der Auswahl

Beim Entwickeln von Formularen mit mehreren Dropdown-Listen kann es hilfreich sein, die Optionen in einer Dropdown-Liste basierend auf der Auswahl aufzufüllen Auswahl in einem anderen getroffen. Dies ermöglicht eine benutzerfreundlichere Erfahrung, indem die Auswahl eingeschränkt und die Dateneingabe effizienter gestaltet wird.

Ein Ansatz zum Erreichen dieser Funktionalität besteht in der Verwendung von JavaScript, um den Inhalt des abhängigen Dropdowns dynamisch zu aktualisieren. Hier ist ein Beispiel, das zeigt, wie ein Dropdown-Menü (B) basierend auf der Auswahl in einem anderen (A) gefüllt 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 
Diese JavaScript-Funktion benötigt zwei Parameter, ddl1 und ddl2, die die beiden Dropdowns darstellen. Zunächst werden Arrays mit den Optionen initialisiert, die in jedem Dropdown angezeigt werden.
Als nächstes wird eine Switch-Anweisung verwendet, um die in ddl1 getroffene Auswahl zu verarbeiten. Abhängig vom Wert von ddl1 werden die Optionen in ddl2 gelöscht und mit den entsprechenden Optionen gefüllt. Die Funktion „createOption“ wird verwendet, um jede Option zu erstellen und zu ddl2 hinzuzufügen.
Im HTML sollten zwei Dropdowns definiert werden:

  
  Colours
  Shapes
  Names



Wenn der Benutzer eine Option in ddl1 auswählt, löst das onchange-Ereignis die Funktion configureDropDownLists aus, die die Optionen in ddl2 entsprechend aktualisiert. Dieser Ansatz bietet eine bequeme Möglichkeit, ein Dropdown-Menü basierend auf der Auswahl in einem anderen zu füllen und so die Benutzerfreundlichkeit von Formularen zu verbessern.