Javascript: hur bäst expandera cascading script från 3 till ca 10 nivåer?
Jag försöker göra ett HTML-formulär, med 10-12 st dropdown menyer.
Innehållet i varje dropdown ska skifta, baserat på vad som valts i föregående dropdown meny. Så kallade cascading dropdowns. Jag använder Javascript i dokumentet för att åstadkomma det.
Jag har gjort grundfunktionaliteten/scriptet för detta. Se koden nedan.
Men jag har gjort bara 3 nivåer hittills, och jag ska upp till .. säg 12 nivåer (för å va på säkra sidan). Min scriptkunskap är 'lagom' och jag börjar få svårt att se hur jag bäst expanderar koden från 3 upp till 12 nivåer?
Det måste nog ske genom både formatering av data-arrayerna och "onchange"-funktionerna längre ner, i olika kombinationer? (och givetvis fler dropdownmenyer i HTMLen )
Jag tror det är relativt enkelt för de som kan mycket. Det handlar nog bara om att se/hitta mönstret.
Skulle gärna uppskatta lite tips och hjälp på vägen att se- och förstå detta?
Tack på förhand
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
}
#andra,
#tredje {
display: none;
}
</style>
<script>
var subjectObject = {
"Front-End": {
"HTML": ["Tags", "Links", "Images"],
"CSS": ["padding", "Margins", "Borders"],
"Bootstrap5": ['Accordion', 'Tooltips', 'Toasts', ],
"JavaScript": ["Variables", "Operators", "Functions"],
"React.JS": ['Components', 'JSX', 'State']
},
"Back-end": {
"Express.js": ['Routing', 'Middleware', 'Cookies'],
"Node.js": ['REPL', 'package manager', 'callbacks']
},
"Database": {
"MongoDB": ['Documents', 'Collections', 'Compass'],
"MySQL": ['Create TABLE', 'Insert Data Into Table', 'Select Query'],
},
"Hybrid/Cross-Platform": {
"Electron JS": ['Main and Renderer Process', 'Browser Window', 'Quote Widget'],
"React-Native": ['React Native CLI', 'Ejecting Expo', 'State Hook'],
"NativeScript": []
}
}
window.onload = function () {
var forsta = document.getElementById('forsta')
var andra = document.getElementById('andra')
var tredje = document.getElementById('tredje')
for (var x in subjectObject) {
// console.log(x);
forsta.options[forsta.options.length] = new Option(x)
}
forsta.onchange = function () {
andra.length = 1
tredje.length = 1
andra.style.display = 'block'
tredje.style.display = 'none'
for (var y in subjectObject[this.value]) {
// console.log(y);
andra.options[andra.options.length] = new Option(y)
}
}
andra.onchange = function () {
tredje.length = 1
tredje.style.display = 'block'
z = subjectObject[forsta.value][this.value]
console.log(z);
for (let i = 0; i < z.length; i++) {
tredje.options[tredje.options.length] = new Option(z[i])
}
}
}
</script>
</head>
<body>
<select id="forsta">
<option value=""> Välj alternativ </option>
</select>
<select id="andra">
<option value=""> Välj alternativ </option>
</select>
<select id="tredje">
<option value=""> Välj alternativ </option>
</select>
</body>
</html>
