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">&lt;select id=&quot;category&quot;&gt;
  &lt;option value=&quot;0&quot;&gt;None&lt;/option&gt;
  &lt;option value=&quot;1&quot;&gt;First&lt;/option&gt;
  &lt;option value=&quot;2&quot;&gt;Second&lt;/option&gt;
  &lt;option value=&quot;3&quot;&gt;Third&lt;/option&gt;
  &lt;option value=&quot;4&quot;&gt;Fourth&lt;/option&gt;
&lt;/select&gt;

&lt;select id=&quot;items&quot;&gt;
&lt;/select&gt;</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 = '&lt;option value=&quot;3&quot;&gt;Smartphone&lt;/option&gt;&lt;option value=&quot;8&quot;&gt;Charger&lt;/option&gt;';
      break;
    case "2":
      items.innerHTML = '&lt;option value=&quot;1&quot;&gt;Basketball&lt;/option&gt;&lt;option value=&quot;4&quot;&gt;Volleyball&lt;/option&gt;';
      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!