Last active
August 26, 2022 09:52
-
-
Save peterhel/805932b7664bc16f057a744d2818e4c8 to your computer and use it in GitHub Desktop.
Dynamic select boxes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <body> | |
| <select name="brand" id="brand"></select> | |
| <select name="brand" id="model"></select> | |
| <script> | |
| const data = { | |
| Fischer: [ | |
| "Speed Cl Zero", | |
| "Speed Twin Skin", | |
| "Carbon Twin Skin", | |
| "Race Twin Skin", | |
| "RCS Cl", | |
| "RCR Cl", | |
| "SCS Cl", | |
| "Speed Sk Plus 902", | |
| "RCS Sk", | |
| "RCR Sk", | |
| "SCS Sk", | |
| ], | |
| Rossignol: [ | |
| "X-ium C3 Prem", | |
| "Ultra R-Skin", | |
| "X-ium R-Skin", | |
| "Delta R-Skin", | |
| "Delta Cl", | |
| "X-ium S1 Prem", | |
| "X-ium S2 Prem", | |
| "X-ium S3 Prem", | |
| "Delta Sk", | |
| ], | |
| Salomon: [ | |
| "S/LAB Cl Zero", | |
| "S/LAB Skin", | |
| "S/RACE Cl", | |
| "S/MAX Cl", | |
| "RC10 Skin", | |
| "S/RACE Skin", | |
| "RC10 Skin", | |
| "S/LAB Sk Red", | |
| "S/LAB Sk", | |
| "S/RACE Sk X-stiff", | |
| "S/RACE Sk", | |
| " S/MAX Sk X-Stiff", | |
| "RS10 Sk", | |
| ], | |
| Madshus: [ | |
| "Redline Zero", | |
| "Redline DP", | |
| "Redline Skin", | |
| "Race Skin", | |
| "Pro Skin", | |
| "Endurance Skin", | |
| "Redline Sk F2", | |
| "Redline Sk F3", | |
| ], | |
| Atomic: [ | |
| "C9", | |
| "C9 Warm", | |
| "C7", | |
| "C2", | |
| "C7 Skin", | |
| "C2 Skin", | |
| "C1 Skin", | |
| "GEN S", | |
| "S9", | |
| "S9 Warm", | |
| "S7", | |
| "S5", | |
| "S2", | |
| ], | |
| }; | |
| const brandSelect = document.getElementById("brand"); | |
| const modelSelect = document.getElementById("model"); | |
| function setModels(selectedBrand) { | |
| let models = data[selectedBrand]; | |
| modelSelect.innerHTML = ""; | |
| for (let model of models) { | |
| let o = document.createElement("option"); | |
| o.value = model; | |
| o.innerText = model; | |
| modelSelect.appendChild(o); | |
| } | |
| } | |
| brandSelect.addEventListener("change", (e) => { | |
| let selectedBrand = e.currentTarget.value; | |
| setModels(selectedBrand); | |
| }); | |
| for (let brand of Object.keys(data)) { | |
| let o = document.createElement("option"); | |
| o.value = brand; | |
| o.innerText = brand; | |
| brandSelect.appendChild(o); | |
| } | |
| setModels(brandSelect.value); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment