Для третьего селекта прикрутил:
onchange="if (this.value) window.location.href = this.value"
и в коде дописал фрагмент, чтобы при создании <option> добавлялся атрибут value
var urls = document.querySelectorAll('#select-3 > option:not(:first-child');
for (j = 0; j < urls.length; ++j) {
urls[j].setAttribute('value', ' ');
}
Вопрос: как теперь value для каждого option из массива (см. конец скрипта) задать также массивом?
<div class="chained-selects">
<select id="select-1">
<option selected>Choose level 1 option</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select id="select-2" disabled>
<option selected>Choose level 2 option</option>
</select>
<select id="select-3" onchange="if (this.value) window.location.href = this.value" disabled >
<option selected>Choose level 3 option</option>
</select>
</div>
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
);
children = Object.keys(children);
// Insert children in s.nextChild
for (var q = next.firstElementChild.nextElementSibling; q; q = nextq) {
nextq = q.nextElementSibling;
next.removeChild(q);
}
for (var i = 0; i < children.length; ++i) {
var optEl = document.createElement('option');
optEl.innerHTML = children[i];
next.appendChild(optEl);
/**/
var urls = document.querySelectorAll('#select-3 > option:not(:first-child');
for (j = 0; j < urls.length; ++j) {
urls[j].setAttribute('value', ' ');
}
/**/
}
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 {
'1': {
'1-1': {
'1-1-1': null,
'1-1-2': null
},
'1-2': {
'1-2-1': null,
'1-2-2': null,
'1-2-3': null,
'1-2-4': null,
},
'1-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,
}
}
};
}