Как обнулять последующий select при смене значения в текущем?

Question

Есть несколько select. Каждый последующий отображается при наличии значения в предыдущем. Логично, что если в select выше значения изменилось, то обнулять последующий. Но, как это сделать?

Я пытался через reset() - в моём случае не подходит. Обнуляется вся форма. В примере последующий select просто скрывается, но когда их много этот вариант не работает, нужно именно обнулять при смене значения в верхнем select.

function selectChange() {
  let oneQuestion = document.getElementById('one-question');
  let twoQuestion = document.getElementById('two-question');
  let threeQuestion = document.getElementById('three-question');
  let fourQuestion = document.getElementById('four-question');

  if (oneQuestion.value === 'yes') {
    threeQuestion.classList.remove('d-n');
    fourQuestion.classList.remove('d-n');
  } else if (oneQuestion.value === 'no') {
    threeQuestion.classList.add('d-n');
    fourQuestion.classList.add('d-n');

    twoQuestion.classList.remove('d-n');
  }
}

<form>
  <p>Любите есть на ночь?</p>
  <select id="one-question" onchange="selectChange()">
    <option value="none">Выберите значение</option>
    <option value="yes">Да</option>
    <option value="no">Нет</option>
  </select>

  <p class="d-n" id="two-question">Почему?</p>

  <p class="d-n" id="three-question">Какую еду?</p>
  <select id="four-question" class="d-n" onchange="selectChange()">
    <option>Выберите значение</option>
    <option>Пирожки</option>
    <option>Сладости</option>
  </select>
</form>

Answer 1

Решение получилось таким образом:

var selects = document.getElementsByClassName('select-item');

Array.from(selects).forEach((el, i) => {
    el.onchange = (e) => {
      if (e.target.value == 'Выберите значение') {
         for (let j = i+1; j < selects.length; j++) {
           selects[j].selectedIndex = 0;
           selects[j].parentElement.classList.remove('shown');
         }
       } else {
         if (selects[i+1] !== undefined) {            selects[i+1].parentElement.classList.add('shown');
         }
         for (let j = i+1; j < selects.length; j++) {
           selects[j].selectedIndex = 0;
         }
       }         
    }
});

БЛОГ НА HUSL

Как обнулять последующий select при смене значения в текущем?

Ответы (1 шт):