0

Всем привет, в данной задаче мне нужно провалидировать select по выбранным option в плане, если хотя бы один из select === disabled, то не пускать в блок else пока не будут заполнены все select. Сейчас же если хотя бы 1 select выбрать то выводится очевидный value дочернего option. Как можно решить данную задачу?

const button = document.querySelector('.button')
const parent = document.querySelector(".parent")
const error = document.querySelector('.error')
const select = document.querySelectorAll('.select')


parent.addEventListener('click', function(e) {
  if (e.target.classList.contains('button')) {
    let parentBlock = e.target.closest('.parent')
    let childBlock = parentBlock.querySelectorAll('.select')
    childBlock.forEach((opt) => {
      let option = opt.options[opt.selectedIndex];
      console.log(option.disabled)
      if (option.disabled) {
        opt.classList.add("input-error");
        error.innerHTML = 'Выберите информацию из выпадающих списков'
      } else {
        opt.classList.remove("input-error");
        error.innerHTML = ""
        console.log(opt.value)
      }
    });
  }
})

const info = document.querySelector(".info")
const child = document.querySelector(".child")
const add = document.querySelector(".add")


add.addEventListener("click", function() {
  child.insertAdjacentHTML(
    "afterend",
    `<div class="child">
            <select class="select">
           <option value="" disabled selected>List</option>
           <option value="3">3</option>
           <option value="4">4</option>
        </select>
        <select class="select">
           <option value="" disabled selected>List</option>
           <option value="5">5</option>
           <option value="6">6</option>
        </select>
    <span class="remove">X</span>
    </div>`
  );

  parent.addEventListener("click", function(e) {
    if (e.target.classList.contains("remove")) {
      e.target.parentNode.remove();
    }
  });
});
<div class="parent">
  <div class="child">
    <select class="select">
      <option value="" selected disabled>List</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <select class="select">
      <option value="" selected disabled>List</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <button class="button">get</button>
    <div class="error"></div>
  </div>
</div>

<button class="add">add select</button>
<div class="info"></div>

1 ответ 1

0

если хотя бы один из select === disabled, то не пускать в блок else пока не будут заполнены все select

Предложу такой вариант...

const button = document.querySelector('.button')
const parent = document.querySelector(".parent")
const error = document.querySelector('.error')
const select = document.querySelectorAll('.select')


parent.addEventListener('click', function(e) {
  if (e.target.classList.contains("remove")) {
    e.target.parentNode.remove();
    return
  }
  if (!e.target.classList.contains('button')) return
  let parentBlock = e.target.closest('.parent')
  let childBlock = parentBlock.querySelectorAll('.select')
  let ok = true
  childBlock.forEach((opt) => {
    let option = opt.options[opt.selectedIndex];
    if (option.disabled) {
      opt.classList.add("input-error");
      ok = false
    } else {
      opt.classList.remove("input-error");
    }
  });
  error.innerHTML = ok ? "" : 'Выберите информацию из выпадающих списков'
})

const info = document.querySelector(".info")
const child = document.querySelector(".child")
const add = document.querySelector(".add")


add.addEventListener("click", function() {
  child.insertAdjacentHTML(
    "afterend",
    `<div class="child">
                <select class="select">
               <option value="" disabled selected>List</option>
               <option value="3">3</option>
               <option value="4">4</option>
            </select>
            <select class="select">
               <option value="" disabled selected>List</option>
               <option value="5">5</option>
               <option value="6">6</option>
            </select>
        <span class="remove">X</span>
        </div>`
  );

  parent.addEventListener("click", function(e) {});
});
<div class="parent">
  <div class="child">
    <select class="select">
      <option value="" selected disabled>List</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <select class="select">
      <option value="" selected disabled>List</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <button class="button">get</button>
    <div class="error"></div>
  </div>
</div>

<button class="add">add select</button>
<div class="info"></div>

2
  • В вашем варианте else тоже отрабатывает сразу же после первого выбранного option у select, а мне нужно чтобы else отрабатывал только после всех выбранных option у select. В данном случае помогло добавить еще одну ветку такого типа else if([...document.querySelectorAll('.select')].every(x=>x.value)). Но всё равно спасибо. 16 янв в 14:01
  • @Andrew Koshman, ты можешь сам добавить ответ со своим, правильным вариантом.
    – ksa
    16 янв в 14:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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