Wie aktualisiere ich Optionen in einem zweiten Dropdown-Menü automatisch basierend auf der Auswahl im ersten Dropdown-Menü?

Erstes Dropdown-Menü aktualisiert Optionen im zweiten Dropdown-Menü automatisch

Problemstellung:

Entwickeln Sie zwei Dropdown-Menüs. Abwärtsmenüs, bei denen die Optionen im zweiten Dropdown-Menü von der im ersten Dropdown-Menü getroffenen Auswahl abhängen. Diese Funktionalität ist ohne Verwendung einer Datenbank erwünscht.

Lösung:

Anfängliches HTML:

<code class="html"><select id="category">
  <option value="0">None</option>
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

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

JavaScript:

Definieren Sie eine Funktion, um das Änderungsereignis des ersten Dropdown-Menüs zu verarbeiten und die Optionen im zweiten Dropdown-Menü entsprechend zu aktualisieren.

<code class="javascript">document.getElementById("category").addEventListener("change", function() {
  var category = this.value;

  var items = document.getElementById("items");
  items.innerHTML = "";

  switch (category) {
    case "1":
      items.innerHTML = '<option value="3">Smartphone</option><option value="8">Charger</option>';
      break;
    case "2":
      items.innerHTML = '<option value="1">Basketball</option><option value="4">Volleyball</option>';
      break;
    default:
      break;
  }
});</code>

Erklärung:

In diesem Beispiel sind die Optionen für das zweite Dropdown-Menü innerhalb der JavaScript-Funktion fest codiert. Wenn der Benutzer eine Kategorie aus dem ersten Dropdown-Menü auswählt, löst das Änderungsereignis die JavaScript-Funktion aus. Basierend auf der ausgewählten Kategorie aktualisiert die Funktion dynamisch die Optionen im zweiten Dropdown-Menü.

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich Optionen in einem zweiten Dropdown-Menü automatisch basierend auf der Auswahl im ersten Dropdown-Menü?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!