Снимаю шляпу!
Мне тут ещё друг помог, делюсь другим для помощи!
var options = generateOptions();
document
.querySelector(".chained-selects")
.addEventListener("change", onChange, false);
function onChange(e) {
e.stopPropagation();
var s = e.target;
if (!s.nextElementSibling) return;
var next = s.nextElementSibling;
if (s.selectedIndex === 0) deactivateBoxes(next);
else {
var path = [];
for (var p = s; p; p = p.previousElementSibling) {
var selOptNode = p.options[p.selectedIndex];
path.push(selOptNode.value);
}
path.reverse();
var children = path.reduce(function(o, optName) {
return o[optName];
}, options);
let childrenNames = [];
for (let key in children) {
let obj = {
name: key,
params: children[key]
};
childrenNames.push(obj);
}
// Insert childrenNames in s.nextChild
for (let q = next.firstElementChild.nextElementSibling; q; q = nextq) {
nextq = q.nextElementSibling;
next.removeChild(q);
}
for (let i = 0; i < childrenNames.length; ++i) {
let optEl = document.createElement("option");
let current = childrenNames[i];
let { name, params } = current;
optEl.innerHTML = name;
if (params && params.url) {
optEl.setAttribute('url', params.url);
}
next.appendChild(optEl);
}
next.selectedIndex = 0;
next.disabled = false;
deactivateBoxes(next.nextElementSibling);
}
}
function deactivateBoxes(s) {
while (s) {
s.selectedIndex = 0;
s.disabled = true;
s = s.nextElementSibling;
}
}
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"
}
},
"audi model 2": {
"1-2-1": null,
"1-2-2": null,
"1-2-3": null,
"1-2-4": null
},
"audi model 3": {
"1-3-1": null,
"1-3-2": null,
"1-3-3": null,
"1-3-4": null,
"1-3-5": null
}
},
"2": {
"2-1": {
"2-1-1": null,
"2-1-2": null
},
"2-2": {
"2-2-1": null,
"2-2-2": null,
"2-2-3": null,
"2-2-4": null
},
"2-3": {
"2-3-1": null,
"2-3-2": null,
"2-3-3": null,
"2-3-4": null,
"2-3-5": null
}
},
"3": {
"3-1": {
"3-1-1": null,
"3-1-2": null
},
"3-2": {
"3-2-1": null,
"3-2-2": null,
"3-2-3": null,
"3-2-4": null
},
"3-3": {
"3-3-1": null,
"3-3-2": null,
"3-3-3": null,
"3-3-4": null,
"3-3-5": null
}
}
};
}
var urlDropdownRef = document.querySelector("#select-3");
urlDropdownRef.addEventListener("change", onUrlDropdownChange);
function onUrlDropdownChange(e) {
e.stopPropagation();
let { target } = e;
let { options, selectedIndex } = target;
let selectedElem = options[selectedIndex];
let url = selectedElem.getAttribute('url');
if (url) {
redirect(url);
}
}
function redirect(url) {
window.location.assign(url);
}