Esm1nec, ещё способ...
<div class="chained-selects">
<select id="select-1">
<option selected>Choose level 1 option</option>
</select>
<select id="select-2" disabled>
<option selected>Choose level 2 option</option>
</select>
<select id="select-3" disabled>
<option selected>Choose level 3 option</option>
</select>
</div>
<script>
const options = generateOptions();
const chainedSelects = document.querySelector(".chained-selects");
chainedSelects.addEventListener("change", onChange, false);
draw(chainedSelects.firstChild, options);
function onChange(event) {
const { target } = event;
let node = target, path = [];
while (node = node.nextElementSibling) {
node.length = 1;
node.disabled = true;
}
if (target.selectedIndex === 0) return;
node = target;
do path.push(node.value);
while (node = node.previousElementSibling);
if (target.nextElementSibling) {
const option = path.reduceRight((option, property) => option[property], options);
draw(target, option);
} else {
const option = path.slice(1).reduceRight((option, property) => option[property], options);
const value = option[target.value];
if (value == null) return;
location.href = value.url || value;
}
}
function draw(target, option) {
for (const [property, value] of Object.entries(option))
target.nextElementSibling.add(new Option(property, property));
target.nextElementSibling.disabled = false;
}
function generateOptions() {
return {
audi: {
"audi model 1": {
"audi model 1 url 1": {
url: "https://google.com"
},
"audi model 1 url 2": {
url: "https://yandex.ru"
}
}
},
"1": {
"1-1": {
"1-1-1": null
},
"1-2": {
"1-2-1": null
},
"1-3": {
"1-3-1": null,
"1-3-2": null
}
}
};
}
</script>