Всем привет, в данной задаче мне нужно провалидировать 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>