Wie fülle ich Dropdown-Listen basierend auf der Benutzerauswahl aus?

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 auszufüllen Auswahl in einer anderen getroffen. Dies ermöglicht eine benutzerfreundlichere Erfahrung, indem die Auswahlmöglichkeiten eingegrenzt und die Dateneingabe effizienter gestaltet wird.

Ein Ansatz zum Erreichen dieser Funktionalität besteht darin, JavaScript zu verwenden, um den Inhalt des abhängigen Dropdowns dynamisch zu aktualisieren. Hier ist ein Beispiel, das zeigt, wie ein Dropdown (B) basierend auf der Auswahl in einem anderen (A) gefüllt wird:

<code class="javascript">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 < colours.length; i++) {
        createOption(ddl2, colours[i], colours[i]);
      }
      break;
    case 'Shapes':
      ddl2.options.length = 0;
      for (i = 0; i < shapes.length; i++) {
        createOption(ddl2, shapes[i], shapes[i]);
      }
      break;
    case 'Names':
      ddl2.options.length = 0;
      for (i = 0; i < names.length; i++) {
        createOption(ddl2, names[i], names[i]);
      }
      break;
    default:
      ddl2.options.length = 0;
      break;
  }
}

function createOption(ddl, text, value) {
  var opt = document.createElement('option');
  opt.value = value;
  opt.text = text;
  ddl.options.add(opt);
}

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 Dropdown-Menüs definiert werden:

<code class="html"><select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
  <option value=""></option>
  <option value="Colours">Colours</option>
  <option value="Shapes">Shapes</option>
  <option value="Names">Names</option>
</select>

<select id="ddl2">
</select></code>

Wenn der Benutzer eine Option in ddl1 auswählt, erfolgt die Änderung Das Ereignis löst 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.

Das obige ist der detaillierte Inhalt vonWie fülle ich Dropdown-Listen basierend auf der Benutzerauswahl aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!