Показать сообщение отдельно
  #5 (permalink)  
Старый 19.01.2020, 10:17
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

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>

Последний раз редактировалось Malleys, 19.01.2020 в 10:19.
Ответить с цитированием