Heim > Artikel > Web-Frontend > Verwendung von JavaScript zur Implementierung einer unbegrenzten kaskadierenden Menüverarbeitung
Verwendung von JavaScript zur Implementierung einer unbegrenzten kaskadierenden Menüverarbeitung
- WBOYOriginal
- 2023-06-15 21:09:481684Durchsuche
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>JavaScript-Code-Implementierung- 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!