Få till dynamisk cascading dropdown lista upp till 10 nivåer? (Javascript)
Har lite svårigheter att få till ett HTML-formulär. Skulle gärna uppskatta lite enkel hjälp på vägen. (är inte skoluppgift eller annat fusk).
Försöker skapa ett HTML formulär som innehåller cascading dropdown menyer, alltså där varje dropdown meny är dynamiskt villkorlig från den föregående. Dvs, det alternativ man väljer i den första dropdown-menyn, avgör vilka alternativ som visas i andra dropdown-menyn, vilket i sin tur avgör vad som visas i den tredje menyn osv. Jag använder Javascript för detta. Allt är inline kod, inga externa filer/resurser.
Problemet jag har, är att få till upp till 10 nivåer dropdown-menyer, där varje nivå är beroende av den föregående.
Jag har fått till 3 nivåer hittills, men upplever det svårt att förenkla ner Javascript-koden så att man liksom kopiera upp funktionaliteten till att fortsätta till ca 10 undernivåer. Kan eventuellt bero på att jag valt en begränsad kodlösning som liksom målat in mig i ett hörn.
Hela syftet med formuläret är att få användaren att välja alternativ i alla nivåer, och sen ha en formulär-knapp längst ner som hämtar in alla valda alternativ skriver ut alla dessa på sidan, under formuläret - kanske via document.write(""); eller liknande.
Skulle gärna uppskatta en liten hjälpande knuff i rätt kodriktning.
Kod nedan, eller https://controlc.com/5e1c3adf8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional">
<html>
<head>
<script>
var subjectObject = {
// Inläsning av meny-innehållet, alla tre existerande nivåer
"Front-end": {
"HTML": ["Links", "Images", "Tables", "Lists"],
"CSS": ["Borders", "Margins", "Backgrounds", "Float"],
"JavaScript": ["Variables", "Operators", "Functions", "Conditions"]
},
"Back-end": {
"PHP": ["Variables", "Strings", "Arrays"],
"SQL": ["SELECT", "UPDATE", "DELETE"]
}
}
// Definiera variablerna och hämta deras innehåll från formuläret
window.onload = function () {
var subjectSel = document.getElementById("subject");
var topicSel = document.getElementById("topic");
var chapterSel = document.getElementById("chapter");
var menu4Sel = document.getElementById("menu4"); // << Ofullständig Nivå 4 av dropdown listan
for (var x in subjectObject) {
subjectSel.options[subjectSel.options.length] = new Option(x, x);
}
subjectSel.onchange = function () {
chapterSel.length = 1;
topicSel.length = 1;
for (var y in subjectObject[this.value]) {
topicSel.options[topicSel.options.length] = new Option(y, y);
}
}
topicSel.onchange = function () {
chapterSel.length = 1;
// Här är var det rör till sig för mig, att jag skapat en loop som läser igenom Topic-menyn.
var z = subjectObject[subjectSel.value][this.value];
for (var i = 0; i < z.length; i++) {
chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
}
}
}
</script>
</head>
<body>
<table width="600px" cellspacing="1" cellpadding="20" align="center" border="1">
<tr>
<td>
<form> Subjects: <select name="subject" id="subject" size="1">
<option value="" selected="selected"> - Select this first - </option>
</select>
<br>
<br> Topics: <select name="topic" id="topic" size="1">
<option value="" selected="selected"> - Select previous first - </option>
</select>
<br>
<br> Chapters: <select name="chapter" id="chapter" size="1" width="100">
<option value="" selected="selected"> - Select previous first - </option>
</select>
<br>
<!-- Ofullständig Nivå 4 av dropdown nivån -->
<br> Menu 4: <select name="menu4" id="menu4" size="1">
<option value="" selected="menu4"> - Select previous first - </option>
</select>
<br>
<br>
<input type="reset" value="Reset">
</form>
</td>
</tr>
</table>
</body>
</html>
