Как дать эту функцию всем элементам select
Есть select, который добавляется динамически. Код работает только с первым select. Надо чтобы оно работало на всех тегах select. Пробовал решить с помощью ForEach, но код не работает как ожидается.
- Юзер нажимает на кнопку "Добавить новое значение" и тогда появляется инпут с кнопкой "+".
- Юзер заполняет инпут и нажимает на кнопку "+", и то значение которое написал юзер передается в select и появляется новый тег option с тем значением который он вел в инпут
<select class="form-control chosen-select">
<option>-- Выберите значение --</option>
<option>Google</option>
</select>
<a class="hidden-new-option">Добавить новое значение</a>
<div class="block-option">
<input class="new-option" type="text" placeholder="Введите новое значение" value="">
<button type="button" class="add-new-option">+</button>
</div>
let optionDiv = document.querySelector('.block-option');
let optionDivVis = document.querySelectorAll('.hidden-new-option');
let hiddenTag = document.querySelector('.hidden-new-option');
optionDivVis.forEach((el) => {
el.addEventListener('click', (e) => {
optionDiv.classList.toggle('active');
if (optionDiv.classList.contains('active')) {
el.innerHTML = "Убрать добавление поле";
} else {
el.innerHTML = "Добавить новое значение";
}
});
});
let addNewBtn = document.querySelector('.add-new-option');
addNewBtn.addEventListener('click', (e) => {
let select = document.querySelector('.chosen-select');
let newOption = document.createElement('option');
let optionVal = document.querySelector('.new-option').value;
if (optionVal == "") {
} else {
newOption.innerHTML = optionVal;
select.append(newOption);
}
});
