Изменение div'ов в зависимости от выбранного select, проверка заполненного поля

Question

подскажите пожалуйста, как изменять значения div'ов в зависимости от select?

                <select id="selects">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>

                <!-- DIVs -->
                <div id="boxes">
                    <div id="1"><p>1 ...</p><p><input id="user1"></p></div>
                    <div id="2"><p>2 ...</p><input id="user2"></p></div>
                    <div id="3"><p>3...</p><input id="user3"></p></div>
                </div>
                <button type="button" id="btn_save">
                    Подтвердить
                </button>

А потом при нажатии кнопки, проверять заполнено ли поля при определенном выбранном div'е.

То есть, если выбран select со значением 1, ниже появляется div с id 1, а при нажатии кнопки с id btn_save, проверяется заполнено ли поле с id user1.

Для select со значением 2, ниже появляется div с id 2, а при нажатии кнопки с id btn_save, проверяется заполнено ли поле с id user2.

И т.д.

Спасибо за внимание.

Answer 1

const select = document.querySelector('select');
const boxItems = document.querySelectorAll('.box-item');
const inputs = document.querySelectorAll('input');
const confirmBtn = document.querySelector('button');

let option = '';
let inputValue = '';

select.addEventListener('change', (e) => {
  option = Number(e.target.value);

  boxItems.forEach((item, i) => {
    if (item.classList.contains('active') && i !== option - 1) {
      item.classList.remove('active');
    }
    if (i === option - 1) {
      item.classList.add('active');
    }
  });
  if (inputValue !== '') {
    inputValue = '';
    inputs[option - 1].value = '';
  }
});

boxItems.forEach((item, i) => {
  inputs[i].addEventListener('input', (e) => {
    inputValue = e.target.value;
  });
});

confirmBtn.addEventListener('click', () => {
  inputValue === '' ? alert('Пустое значение') : alert('success');
});

.box-item {
  display: none;
}

.box-item.active {
  display: block;
}

<select class="selects">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<div class="boxes">
  <div class="box-item active">
    <p>1 ...</p>
    <p><input id="user1"></p>
  </div>
  <div class="box-item">
    <p>2 ...</p><input id="user2"></p>
  </div>
  <div class="box-item">
    <p>3...</p><input id="user3"></p>
  </div>
</div>
<button type="button" id="btn_save">
     Подтвердить
</button>

БЛОГ НА HUSL

Изменение div'ов в зависимости от выбранного select, проверка заполненного поля

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