Web-Frontend
js-Tutorial
Verwendung von JavaScript zur Implementierung einer unbegrenzten kaskadierenden Menüverarbeitung
Verwendung von JavaScript zur Implementierung einer unbegrenzten kaskadierenden Menüverarbeitung
Unendlich kaskadierendes Menü ist eine sehr verbreitete Front-End-Interaktionsmethode und wird in vielen Szenarien häufig verwendet. In diesem Artikel erfahren Sie, wie Sie mit JavaScript unendliche kaskadierende Menüs implementieren.
1. Implementierungsideen
Die Idee, unendliche kaskadierende Menüs im Frontend zu implementieren, kann wie folgt zusammengefasst werden:
- Definieren Sie die Datenquelle: normalerweise ein JSON-Objekt, das zum Speichern aller Ebenen von Menüdaten verwendet wird;
- Dynamisch Rendering-Menü: Wenn eine Option einer bestimmten Ebene ausgewählt wird, wird das Menü der nächsten Ebene dynamisch generiert.
- Verknüpfungseffekt erzielen: Wenn eine Option einer bestimmten Ebene ausgewählt wird, muss das Menü der nächsten Ebene rechtzeitig aktualisiert werden , und die verfügbaren Optionen müssen entsprechend der ausgewählten Option geändert werden.
Die spezifischen Implementierungsideen lauten wie folgt:
- Definieren Sie ein Array, um den auf jeder Ebene ausgewählten Wert zu speichern.
- Definieren Sie mehrere Auswahl-Tags in HTML, um Menüs auf jeder Ebene anzuzeigen an ein Änderungsereignis gebunden. Wenn eine der Optionen ausgewählt wird, wird der Wert an der entsprechenden Position im Array aktualisiert, das nächste Auswahltag wird generiert und die nächste Ebene optionaler Optionen wird basierend auf der vorherigen Optionsebene gerendert.
- Durch Schleifengenerierung werden Tags auf allen Ebenen ausgewählt und in das DOM eingefügt.
- 2. Code-Implementierung
Der Prozess der Implementierung unendlich kaskadierender Menüs umfasst hauptsächlich zwei Teile, nämlich das Layout der HTML-Seite und das Schreiben von JavaScript-Code. Schauen wir uns als Nächstes die Implementierungsdetails der beiden Teile an.
HTML-Seitenlayout- Auf der HTML-Seite müssen wir mehrere Auswahl-Tags erstellen, um Menüs auf jeder Ebene anzuzeigen. Gleichzeitig müssen Sie auch ein Änderungsereignis an jedes ausgewählte Tag binden, um eine dynamische Aktualisierung des Menüs zu implementieren.
<body>
<form>
<select id="province" onchange="changeProvince()">
<option value="">请选择省份</option>
<option value="1">浙江</option>
<option value="2">江苏</option>
</select>
<select id="city" onchange="changeCity()"></select>
<select id="area"></select>
</form>
</body>- Im JavaScript-Code müssen Sie ein JSON-Objekt definieren, um alle Ebenen von Menüdaten zu speichern. Nach Auswahl einer Option auf einer bestimmten Ebene wird das Menü auf der nächsten Ebene dynamisch generiert und die verfügbaren Optionen werden entsprechend der ausgewählten Option geändert. Die spezifische Implementierung ist wie folgt:
var menuData = {
"province": {
"1": "杭州市",
"2": "温州市"
},
"city": {
"1": {
"11": "西湖区",
"12": "江干区"
},
"2": {
"21": "鹿城区",
"22": "瓯海区"
}
},
"area": {
"11": {
"111": "西溪湿地",
"112": "灵隐寺"
},
"12": {
"121": "杭州大厦",
"122": "江干公园"
},
"21": {
"211": "南湖",
"212": "红旗广场"
},
"22": {
"221": "瓯海公园",
"222": "龙湾湾国际商务区"
}
}
}
var level = ["province", "city", "area"];
var selectedValue = ["", "", ""];
function init() {
generateMenu("province", "1");
}
function changeProvince() {
selectedValue[0] = document.getElementById("province").value;
document.getElementById("city").innerHTML = "";
document.getElementById("area").innerHTML = "";
generateMenu("city", selectedValue[0]);
}
function changeCity() {
selectedValue[1] = document.getElementById("city").value;
document.getElementById("area").innerHTML = "";
generateMenu("area", selectedValue[1]);
}
function generateMenu(currentLevel, currentValue) {
var select = document.createElement("select");
select.setAttribute("id", currentLevel);
select.setAttribute("onchange", "change" + currentLevel.charAt(0).toUpperCase() + currentLevel.slice(1) + "()");
var option = document.createElement("option");
option.setAttribute("value", "");
option.innerHTML = "请选择" + currentLevel;
select.appendChild(option);
var submenu = menuData[currentLevel];
for (var key in submenu) {
if (submenu[key] != null) {
var option = document.createElement("option");
option.setAttribute("value", key);
option.innerHTML = submenu[key];
select.appendChild(option);
}
}
document.getElementById(currentLevel).appendChild(select);
if (currentValue != "") {
document.getElementById(currentLevel).value = currentValue;
if (level.indexOf(currentLevel) < level.length - 1) {
var nextLevel = level[level.indexOf(currentLevel) + 1];
generateMenu(nextLevel, selectedValue[level.indexOf(nextLevel)]);
}
}
}
init();In diesem Code werden zunächst ein JSON-Objekt „menuData“, das Menüdaten für jede Ebene enthält, und eine Array-Ebene definiert, um die Bezeichner jeder Ebene zu speichern. Gleichzeitig wird auch ein Array selectedValue definiert, um die ausgewählten Werte auf jeder Ebene zu speichern. Danach wird eine Init-Funktion definiert, um das Menü der ersten Ebene, also das Menü zum Generieren von Provinzen, zu initialisieren.
Als nächstes werden zwei Funktionen, changeProvince und changeCity, definiert, um die Werte der ausgewählten Provinz und Stadt zu aktualisieren und das Menü der nächsten Ebene neu zu generieren.
Abschließend wird die Funktion „generateMenu“ definiert, mit der das Menü der aktuellen Ebene generiert und rekursive Aufrufe zur nächsten Ebene durchgeführt werden. Beim Generieren des Menüs wird das Select-Tag generiert und die entsprechende Option hinzugefügt und nach Abschluss jedes Menü-Renderings dem DOM hinzugefügt. Wenn die aktuelle Ebene nicht die letzte Ebene ist, wird ein rekursiver Aufruf basierend auf dem aktuell ausgewählten Wert durchgeführt, bis alle Menüebenen generiert sind.
3. Zusammenfassung
Durch die Implementierung des obigen Codes können wir sehen, dass es nicht schwierig ist, unendliche kaskadierende Menüs in JavaScript zu implementieren. Die in diesem Artikel vorgestellte Implementierungsmethode ist eine relativ einfache Implementierungsmethode. Für unterschiedliche Anforderungen muss sie entsprechend der tatsächlichen Situation angepasst werden.
Natürlich gibt es bereits einige relativ ausgereifte Bibliotheken von Drittanbietern, die zur Implementierung unendlich kaskadierender Menüs verwendet werden können, wie z. B. jQuery und Vue.js, mit denen diese Funktion bequemer implementiert werden kann. Wir sollten jedoch immer noch verstehen, wie diese Bibliotheken auf der Grundlage der Beherrschung der Prinzipien verwendet werden, damit wir diese Tools flexibler verwenden können, um verschiedene komplexe Aufgaben zu erledigen.
Das obige ist der detaillierte Inhalt vonVerwendung von JavaScript zur Implementierung einer unbegrenzten kaskadierenden Menüverarbeitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1389
52
Der Betriebsprozess des WIN10-Diensthosts belegt zu viel CPU
Mar 27, 2024 pm 02:41 PM
1. Zuerst klicken wir mit der rechten Maustaste auf die leere Stelle der Taskleiste und wählen die Option [Task-Manager] oder klicken mit der rechten Maustaste auf das Startlogo und wählen dann die Option [Task-Manager]. 2. In der geöffneten Task-Manager-Oberfläche klicken wir ganz rechts auf die Registerkarte [Dienste]. 3. Klicken Sie in der geöffneten Registerkarte [Dienst] unten auf die Option [Dienst öffnen]. 4. Klicken Sie im sich öffnenden Fenster [Dienste] mit der rechten Maustaste auf den Dienst [InternetConnectionSharing(ICS)] und wählen Sie dann die Option [Eigenschaften]. 5. Ändern Sie im sich öffnenden Eigenschaftenfenster die Option „Öffnen mit“ in „Deaktiviert“, klicken Sie auf „Übernehmen“ und dann auf „OK“. 6. Klicken Sie auf das Startlogo, dann auf die Schaltfläche zum Herunterfahren, wählen Sie [Neustart] und schließen Sie den Neustart des Computers ab.
WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen
Dec 17, 2023 pm 05:30 PM
WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie
Eine Kurzanleitung zur CSV-Dateibearbeitung
Dec 26, 2023 pm 02:23 PM
Lernen Sie schnell, wie Sie Dateien im CSV-Format öffnen und verarbeiten. Mit der kontinuierlichen Weiterentwicklung der Datenanalyse und -verarbeitung ist das CSV-Format zu einem der am weitesten verbreiteten Dateiformate geworden. Eine CSV-Datei ist eine einfache und leicht lesbare Textdatei mit verschiedenen, durch Kommas getrennten Datenfeldern. Ob in der akademischen Forschung, in der Geschäftsanalyse oder in der Datenverarbeitung – wir stoßen häufig auf Situationen, in denen wir CSV-Dateien öffnen und verarbeiten müssen. Die folgende Anleitung zeigt Ihnen, wie Sie schnell lernen, Dateien im CSV-Format zu öffnen und zu verarbeiten. Schritt 1: Verstehen Sie zunächst das CSV-Dateiformat.
Erfahren Sie, wie Sie mit Sonderzeichen umgehen und einfache Anführungszeichen in PHP konvertieren
Mar 27, 2024 pm 12:39 PM
Im PHP-Entwicklungsprozess ist der Umgang mit Sonderzeichen ein häufiges Problem, insbesondere bei der Zeichenfolgenverarbeitung werden Sonderzeichen häufig mit Escapezeichen versehen. Unter diesen ist die Umwandlung von Sonderzeichen in einfache Anführungszeichen eine relativ häufige Anforderung, da einfache Anführungszeichen in PHP eine gängige Methode zum Umschließen von Zeichenfolgen sind. In diesem Artikel erklären wir, wie man in PHP mit einfachen Anführungszeichen bei der Konvertierung von Sonderzeichen umgeht, und stellen spezifische Codebeispiele bereit. Zu den Sonderzeichen in PHP gehören unter anderem einfache Anführungszeichen ('), doppelte Anführungszeichen ("), Backslash () usw. In Zeichenfolgen
Wie kann das Problem gelöst werden, nachdem das Upgrade von Win7 auf Win10 fehlgeschlagen ist?
Dec 26, 2023 pm 07:49 PM
Wenn das von uns verwendete Betriebssystem Win7 ist, können einige Freunde beim Upgrade möglicherweise kein Upgrade von Win7 auf Win10 durchführen. Der Herausgeber meint, wir könnten es noch einmal mit einem Upgrade versuchen, um zu sehen, ob das Problem dadurch gelöst werden kann. Schauen wir uns an, was der Editor getan hat, um Einzelheiten zu erfahren. Was zu tun ist, wenn das Upgrade von Win7 auf Win10 fehlschlägt: 1. Es wird empfohlen, zuerst einen Treiber herunterzuladen, um zu prüfen, ob Ihr Computer auf Win10 aktualisiert werden kann Verwenden Sie nach dem Upgrade den Treibertest. Überprüfen Sie, ob Treiberanomalien vorliegen, und beheben Sie diese dann mit einem Klick. Methode 2: 1. Löschen Sie alle Dateien unter C:\Windows\SoftwareDistribution\Download. 2.win+R führen Sie „wuauclt.e“ aus
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems
Dec 17, 2023 pm 05:13 PM
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir
Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode
Jan 05, 2024 pm 06:08 PM
JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest
So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript
Jan 05, 2024 pm 01:37 PM
Einführung in die Methode zum Abrufen des HTTP-Statuscodes in JavaScript: Bei der Front-End-Entwicklung müssen wir uns häufig mit der Interaktion mit der Back-End-Schnittstelle befassen, und der HTTP-Statuscode ist ein sehr wichtiger Teil davon. Das Verstehen und Abrufen von HTTP-Statuscodes hilft uns, die von der Schnittstelle zurückgegebenen Daten besser zu verarbeiten. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript HTTP-Statuscodes erhalten, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist ein HTTP-Statuscode? HTTP-Statuscode bedeutet, dass der Dienst den Dienst anfordert, wenn er eine Anfrage an den Server initiiert
