Tutorial zur Implementierung eines dynamischen kaskadierenden Dropdown-Menüs in JavaScript

In diesem Tutorial erfahren Sie, wie Sie dynamische kaskadierende Dropdown-Menüs mithilfe von JavaScript effizient implementieren. Durch den Aufbau einer datengesteuerten Logik können wir den entsprechenden Inhalt des Unter-Dropdown-Menüs basierend auf der Auswahl des Benutzers in einem Haupt-Dropdown-Menü dynamisch aktualisieren und anzeigen. Diese Methode vermeidet komplexe DOM-Operationen, verbessert die Wartbarkeit des Codes und die Benutzererfahrung und ist eine ideale Lösung für die Erstellung interaktiver Formulare.

Einführung

In der Webentwicklung sind dynamisch kaskadierende Dropdown-Menüs eine häufige Anforderung, beispielsweise die Anzeige der entsprechenden Stadt nach Auswahl eines Landes oder die Anzeige eines bestimmten Modells nach Auswahl einer Produktkategorie. Traditionell könnten Entwickler separate HTML-Elemente für jedes mögliche Untermenü erstellen und diese explizit über JavaScript ausblenden oder anzeigen oder sogar ganze HTML-Fragmente direkt über innerHTML ersetzen. Dieser Ansatz führt jedoch häufig zu redundantem Code, Schwierigkeiten bei der Wartung und kann sich bei häufigem Betrieb auf die Seitenleistung auswirken. In diesem Tutorial wird eine elegantere und effizientere Lösung vorgestellt, die diese Funktionalität durch datengesteuerte und optimierte DOM-Manipulation erreicht.

Kernidee

Die Kernidee dieses Tutorials ist:

1. Einzelner dynamischer Container: Anstatt für jedes mögliche Untermenü einen separaten HTML-Container zu erstellen, verwenden Sie einen gemeinsamen Container (z. B. oder
   ), dessen Inhalt basierend auf der Auswahl des Hauptmenüs dynamisch aktualisiert wird.
2. Datengesteuert: Alle Daten der Untermenüoptionen werden zur einfachen Verwaltung und zum einfachen Zugriff zentral in einem JavaScript-Objekt gespeichert.
3. Effizienter DOM-Betrieb: Wenn sich die Hauptmenüoption ändert, löschen Sie den alten Inhalt im dynamischen Container und erstellen und fügen Sie dann programmgesteuert neue Optionen basierend auf der vordefinierten Datenstruktur hinzu, anstatt die gesamte HTML-Zeichenfolge zu ersetzen.
4. CSS-Steuerung der Anzeige: Verwenden Sie eine CSS-Klasse, um den anfänglichen verborgenen Zustand eines dynamischen Containers zu steuern, und entfernen oder fügen Sie die Klasse über JavaScript hinzu, um die Anzeige bei Bedarf zu steuern.

HTML-Strukturdesign

Zuerst müssen wir die HTML-Struktur der Seite definieren. Es enthält ein Haupt-Dropdown-Menü und einen Platzhalter für die Anzeige dynamischer Untermenüs.

 <tabelle>
  <tr>
    <td>
      <label>ABC:</label>
      <select id="abcid">
        <option value="" selected deaktiviert>Auswählen-</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
    </td>
  </tr>
  <!-- Platzhalter für dynamisches Untermenü -->
  <tr class="noDisplay">
    <td>
      <label></label>
      <w>
        <option value="" selected deaktiviert>Auswählen-</option>
      
    </w>
</td>
  </tr>
</tabelle>

Strukturbeschreibung:

• #abcid: Dies ist unser Haupt-Dropdown-Menü, in dem der Benutzer A, B oder C auswählt.
• : Dies ist eine wichtige Platzhalterzeile. Es wird zunächst von der Klasse noDisplay ausgeblendet. Es enthält ein leeres - und ein leeres -Element, die in JavaScript basierend auf der Hauptmenüauswahl dynamisch gefüllt und aktualisiert werden.

  CSS-Stildefinition

  Um den Effekt des anfänglichen Ausblendens und anschließenden Einblendens zu erzielen, benötigen wir eine einfache CSS-Regel.

   .noDisplay {
    Anzeige: keine; /* Das Element zunächst ausblenden */
  }

  Wenn das tr-Element die Klasse noDisplay hat, wird es nicht auf der Seite angezeigt. Wenn wir es anzeigen müssen, können wir diese Klasse über JavaScript entfernen.

  JavaScript-Kernlogik

  Der JavaScript-Teil ist dafür verantwortlich, Änderungen im Haupt-Dropdown-Menü zu überwachen und den Inhalt des Untermenüs basierend auf der Auswahl dynamisch zu aktualisieren.

   // Erforderliches DOM-Element abrufen const selectABC = document.querySelector('#abcid'); // Haupt-Dropdown-Menü const trSelect2 = document.querySelector('tr.noDisplay'); // Containerzeile des dynamischen Untermenüs const label_2 = trSelect2.querySelector('label'); // Label des dynamischen Untermenüs const select_2 = trSelect2.querySelector('select'); // Das dynamische Untermenü selbst // Definiert die Datenstruktur der Untermenüoptionen const selCases = {
    A: {
      Etikett: 'Option A',
      Auswahl: [{
        k: '1',
        v: 'Alex'
      }, {
        k: '2',
        v: 'Jack'
      }]
    },
    B: {
      Etikett: 'Option B',
      Auswahl: [{
        k: 'w',
        v: 'USA'
      }, {
        k: 'x',
        v: 'Australien'
      }, {
        k: 'y',
        v: 'Indien'
      }]
    },
    C: {
      Etikett: 'Option C',
      Auswahl: [{
        k: '$',
        v: 'Blau'
      }, {
        k: '£',
        v: 'Grün'
      }, {
        k: '§',
        v: 'Rot'
      }]
    }
  };
  
  // Hören Sie sich das Änderungsereignis des Haupt-Dropdown-Menüs an selectABC.onchange = e => {
    // 1. Löschen Sie die vorhandenen Optionen des dynamischen Untermenüs // Behalten Sie die erste Standardoption „Select-“ bei und löschen Sie sie ab Index 1 select_2.length = 1;
    select_2.selectedIndex = 0; //Ausgewählte Elemente auf Standard zurücksetzen //Den aktuell im Hauptmenü ausgewählten Wert abrufen (A, B oder C)
    const selectedValue = selectABC.value;
  
    // Stellen Sie sicher, dass eine gültige Option ausgewählt ist (nicht die Standardeinstellung „Select-“ null)
    if (selectedValue && selCases[selectedValue]) {
      // 2. Aktualisieren Sie den Beschriftungstext des dynamischen Untermenüs label_2.textContent = selCases[selectedValue].label;
  
      // 3. Durchlaufen Sie die Daten und fügen Sie neue Optionen hinzu selCases[selectedValue].sels.forEach(({
        k,
        v
      }) => {
        select_2.add(new Option(v, k));
      });
  
      // 4. Den dynamischen Untermenücontainer anzeigen trSelect2.classList.remove('noDisplay');
    } anders {
      // Wenn das Standardelement oder ein ungültiges Element ausgewählt ist, blenden Sie das Untermenü aus trSelect2.classList.add('noDisplay');
    }
  };

  Code-Analyse:

  1. Holen Sie sich die DOM-Elemente: Verwenden Sie document.querySelector, um das Haupt-Dropdown-Menü (#abcid) und die Containerzeile (.noDisplay) des dynamischen Untermenüs und seiner inneren - und
  -Elemente abzurufen.
• Datenstruktur selCases: Dies ist ein JavaScript-Objekt mit dem Hauptmenüwert (A, B, C) als Schlüssel. Jeder Schlüssel entspricht einem Objekt, einschließlich:
  • label: Der Anzeigetext des Untermenüs.
  • sels: Ein Array, das die tatsächlichen Optionen des Untermenüs enthält. Jede Option ist ein Objekt mit den Attributen k (Wert) und v (Text). Diese Struktur macht die Datenverwaltung übersichtlich und einfach erweiterbar.
• selectABC.onchange-Ereignisbehandlung:
  • select_2.length = 1;: Dies ist eine effektive Möglichkeit, die Dropdown-Menüoptionen zu löschen. Es setzt die Anzahl der Optionen des Dropdown-Menüs auf 1 und entfernt alle bis auf die erste (normalerweise „Auswählen-“ oder die Standardeinstellung).
  • select_2.selectedIndex = 0;: Setzt den ausgewählten Eintrag des Untermenüs auf den ersten zurück.
  • label_2.textContent = selCases[selectedValue].label;: Aktualisieren Sie den Beschriftungstext vor dem Untermenü basierend auf der Auswahl im Hauptmenü.
  • selCases[selectedValue].sels.forEach(...): Durchlaufen Sie das Unteroptionsarray, das der Hauptmenüoption in selCases entspricht.
  • select_2.add(new Option(v, k));: Erstellen Sie ein neues -Element für jede Unteroption und fügen Sie es dem Untermenü hinzu. new Option(text, value) ist eine praktische Möglichkeit, Optionen zu erstellen.
  • trSelect2.classList.remove('noDisplay');: Entfernen Sie die Klasse noDisplay, um den dynamischen Untermenücontainer anzuzeigen.
  • Behandeln Sie den Anfangszustand oder eine ungültige Auswahl: Blenden Sie den Untermenücontainer aus, wenn die Hauptmenüauswahl standardmäßig leer ist.

Zu beachtende Dinge und Best Practices

1. Zentralisierte Datenverwaltung: Es ist eine bewährte Methode, alle dynamischen Optionsdaten in einem JavaScript-Objekt zu speichern. Dadurch wird der Code besser lesbar, einfacher zu warten und erleichtert das zukünftige Erweitern oder Laden von Daten aus der Backend-API.
2. Vermeiden Sie innerHTML-Missbrauch: Die häufige Verwendung von innerHTML zum Ersetzen großer HTML-Abschnitte führt dazu, dass der Browser das DOM neu analysiert und rendert, was sich auf die Leistung auswirkt. Dieses Tutorial verwendet new Option() und select.add(), um das -Element präzise zu bedienen, was effizienter ist.
3. DOM-Element-Caching: Rufen Sie Verweise auf DOM-Elemente (z. B. selectABC, trSelect2) am Anfang des Skripts ab und speichern Sie sie zwischen, um wiederholte Abfragen des DOM in der Ereignisverarbeitungsfunktion zu vermeiden und die Leistung zu verbessern.
4. Verarbeitung des Anfangszustands: Stellen Sie sicher, dass sich das dynamische Untermenü beim Laden der Seite im richtigen ausgeblendeten Zustand befindet. Dieses Tutorial wird durch die CSS-Klasse .noDisplay und die bedingte Beurteilung in JavaScript implementiert.
5. Benutzererfahrung: Wenn das Hauptmenü wechselt, kann das Löschen und Zurücksetzen des ausgewählten Status des Untermenüs verhindern, dass Benutzer alte oder irrelevante Optionen sehen.
6. Barrierefreiheit: Stellen Sie sicher, dass Sie aussagekräftigen Text für -Elemente bereitstellen, und erwägen Sie das Hinzufügen von aria-labelledby oder anderen ARIA-Attributen zu dynamisch generierten ausgewählten Elementen, um die Barrierefreiheit zu verbessern.
7. Formularübermittlung: Wenn das Formular übermittelt wird, erhalten Sie den vom Benutzer ausgewählten Wert aus selectABC und select_2.

Zusammenfassen

Mithilfe der in diesem Tutorial vorgestellten Methoden haben wir erfolgreich ein effizientes, wartbares und benutzerfreundliches dynamisches kaskadierendes Dropdown-Menü implementiert. Der Kern besteht darin, eine datengesteuerte Strategie zu übernehmen und optimierte DOM-Operationen und CSS-Klassen zu verwenden, um das Anzeigen und Ausblenden von Elementen zu steuern. Diese Methode optimiert nicht nur die Codestruktur und verbessert die Seitenleistung, sondern legt auch eine solide Grundlage für die Erstellung komplexerer interaktiver Formulare.