VampireFang,
ок ... дознание продолжается)))
что не так?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<div class="chained-selects">
<select class="app-select form-control">
<option selected>Выберите марку</option>
</select>
<select class="app-select form-control" disabled>
<option selected>Выберите модель</option>
</select>
<button>Найти</button>
</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 = false;
}
if (target.selectedIndex === 0) return;
node = target;
do path.push(node.value);
while (node = node.previousElementSibling);
if (target.nextElementSibling && target.nextElementSibling.options) {
const option = path.reduceRight((option, property) => option[property], options);
draw(target, option);
} else { return;
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;
target.addEventListener('click', function(event) {
var target = event.target;
});
}
function generateOptions() {
return {
"AUDI": {
"80": {
"B3": {
url: "p1.html"
},
"B4": {
url: "p2.html"
}
},
"100": {
"C3": {
url: "p3.html"
},
"C4": {
url: "p4.html"
}
}
},
"BMW": {
"3 series": {
"E30": {
url: "p13.html"
},
"E36": {
url: "p14.html"
},
"E46": {
url: "p15.html"
}
},
"5 series": {
"E34": {
url: "p16.html"
},
"E39": {
url: "p17.html"
},
"E60": {
url: "p18.html"
}
}
}
};
}
</script>
</body>
</html>