Есть несколько select'ов. Каждый последующий отображается при наличии значения в предыдущем. Логично, что если в select выше значения изменилось, то обнулять последующий. Но, как это сделать?
Я пытался через reset() - в моём случае не подходит. Обнуляется вся форма.
В примере последующий select просто скрывается, но когда их много этот вариант не работает, нужно именно обнулять при смене значения в верхнем select.
<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>
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');
}
}