js - выпадающий список - скрытые блоки

Рейтинг: 0Ответов: 2Опубликовано: 31.01.2023

Имеются: выпадающий список, скрытые блоки. Необходимо - при выборе курсором значения в списке открывается соответствующий блок (не при нажатии на кнопку). Подскажите направления

.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>

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

/* Выборку элементов, лучше делать заранее,
   тк поиск элементов в DOM медленная операция */ 

const select = document.getElementById('select')
const tabs = document.querySelectorAll('div[data-tab]')

select.addEventListener('change', ({target: {value}}) => {
  tabs?.forEach(tab => 
    tab.dataset.tab === value 
      ? tab.classList.add('active') 
      : tab.classList.remove('active'))
})
.tab {
  display: none;
}



.active {
  display: block;
}
<label>
  Select Tabs
  <select name="select-tabs" id="select">
     <option value="1">Приход</option>
     <option value="2">Расход</option>
     <option value="3">Обмен</option>
  </select>
</label>

<div class="tab active" data-tab="1">Приход</div>
<div class="tab" data-tab="2">Расход</div>
<div class="tab" data-tab="3">Обмен</div>

▲ 1
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";
        }
    });
});