Отключить SELECT, пока не будет выбран предыдущий SELECT на чистом JS

Question

У меня есть 5 селектов и одна кнопка. При загрузке страницы активен только первый селект.

Я хочу, чтобы select2 отключился, пока не будет выбран select1, и отключен select 3, пока не будут выбраны SELECTS 1 и 2 и т.д. Затем, когда выбраны все селекты становится активна кнопка

Подскажите, пожалуйста, как сделать на чистом JS.

Answer 1

Нужно собрать все селекты и повесить на них событие change
Собрать отдельно все опции, состояние которых (выбрана или нет) вы будете отслеживать.

В данном примере, нужно везде выбрать 'two'

let selects = document.querySelectorAll('select');
let options = document.querySelectorAll('option[value="two"]');

let one = document.querySelector('.one');
let two = document.querySelector('.two');
let tree = document.querySelector('.tree');


let btn = document.querySelector('.btn');


for(let select of selects){
select.addEventListener('change', (e)=>{
two.disabled = !options[0].selected;
tree.disabled = !options[0].selected || !options[1].selected


btn.disabled = ![...options].every(item => item.selected)
})
}

<select name="" id="" class="one">
    <option value="one" >One</option>
    <option value="two" >Two</option>
</select>
<select name="" id="" class="two" disabled>
  <option value="one" >One</option>
  <option value="two" >Two</option>
</select>
<select name="" id="" class="tree" disabled>
<option value="one" >One</option>
  <option value="two" >Two</option></select>

<button class = 'btn' disabled>Button</button>

Answer 2

Вот такой вот код у меня получился надеюсь помог

const selectDiv = document.getElementById("select-div");
  const selectCount = selectDiv.getElementsByTagName("select");
  for(let i = 0; i < selectCount.length; i++){
    selectCount[i].addEventListener("change", function(){
      this.nextElementSibling.disabled = false;
    });
  }

<div id="select-div">
  <select name="" id="">
    <option value="default" disabled selected>Default</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>

  <select name="" id="" disabled>
    <option value="default" disabled selected>Default</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>

  <select name="" id="" disabled>
    <option value="default" disabled selected>Default</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>

  <select name="" id="" disabled>
    <option value="default" disabled selected>Default</option>
    <option value="7">7</option>
    <option value="8">8</option>
  </select>

  <select name="" id="" disabled>
    <option value="default" disabled selected>Default</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>

  <button disabled>Отправить</button>
</div>

БЛОГ НА HUSL

Отключить SELECT, пока не будет выбран предыдущий SELECT на чистом JS

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