0

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

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

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

1
  • А можно пример кода?
    – Miha
    16 фев 2022 в 9:46

2 ответа 2

3

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

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>

3
  • Лови плюсик за отсутствие var в циклах))))
    – Gelloiss
    16 фев 2022 в 10:53
  • @Gelloiss спс, надеюсь и дальше услышать советы от вас)))
    – Miha
    16 фев 2022 в 11:15
  • Большое спасибо!))
    – Jul
    16 фев 2022 в 14:20
2
  1. Нужно собрать все селекты и повесить на них событие change
  2. Собрать отдельно все опции, состояние которых (выбрана или нет) вы будете отслеживать.

В данном примере, нужно везде выбрать '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>

1
  • Спасибо большое))
    – Jul
    16 фев 2022 в 14:21

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.