js - выпадающий список - скрытые блоки
Имеются: выпадающий список, скрытые блоки. Необходимо - при выборе курсором значения в списке открывается соответствующий блок (не при нажатии на кнопку). Подскажите направления
.block {
display: none;
}
<select name="" id="">
<option value="1">Приход</option>
<option value="2">Расход</option>
<option value="3">Обмен</option>
</select>
<div class="block" id="1">Приход</div>
<div class="block" id="2">Расход</div>
<div class="block" id="3">Обмен</div>
Ответы (1 шт):
Автор решения: Leksor
→ Ссылка
document.querySelector("#").addEventListener("change", function () {
const selectedValue = this.value;
const blocks = document.querySelectorAll(".block");
blocks.forEach(block => {
if (block.id == selectedValue) {
block.style.display = "block";
} else {
block.style.display = "none";
}
});
});