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:
Die spezifischen Implementierungsideen lauten wie folgt:
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
<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>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!
