Элементы select не открываются с библиотекой choises, помогите найти где конфликтует
Задача: В блоке контактов нужно предусмотреть возможность добавления до 10 контактов включительно. Для этого под добавленными контактами должна быть кнопка "Добавить контакт". Если у клиента уже добавлено 10 контактов, кнопка не должна отображаться. Подключены библиотеки bootstrap5 и coises. Проблема в том что select не активный использую метод клонирования.
<div class="modal__contact">
<div id="contactFormsContainer"></div>
<div id="contactFormTemplate" style="display: none">
<select class="modal__contact-type js-choice">
<option
class="choice"
value="email"
aria-label="'электронная почта"
>
Email
</option>
<option class="choice" value="phone" aria-label="телефон">
Телефон
</option>
<option
class="choice"
value="extraPhone"
aria-label="дополнительный телефон"
>
Дополнительный телефон
</option>
</select>
<input
type="text"
class="modal__contact-value"
placeholder="Введите данные контакта"
/>
<button class="modal__btn-close">Закрыть</button>
</div>
<button
class="modal__btn-add"
type="button"
id="openContactFormBtn"
aria-label="добавить контакт"
>
Добавить контакт
</button>
</div>
JS:
document.addEventListener("DOMContentLoaded", function () {
// Получаем все элементы с классом .js-choice
const choiceElements = document.querySelectorAll(".js-choice");
// Проходим по каждому элементу и инициализируем Choices
choiceElements.forEach(function (element) {
new Choices(element, {
allowHTML: true, // Устанавливаем allowHTML в true
});
});
});
let maxContacts = 10;
let openContactFormBtn = document.getElementById("openContactFormBtn"); //кнопка добавить
let contactFormsContainer = document.getElementById("contactFormsContainer"); //
let contactFormTemplate = document.getElementById("contactFormTemplate");
function updateAddContactButtonVisibility() {
if (contactFormsContainer.childElementCount >= maxContacts) {
openContactFormBtn.style.display = "none";
} else {
openContactFormBtn.style.display = "block";
}
}
function addContactForm() {
if (contactFormsContainer.childElementCount < maxContacts) {
let clonedForm = contactFormTemplate.cloneNode(true);
clonedForm.removeAttribute("id");
clonedForm.style.display = "block";
contactFormsContainer.appendChild(clonedForm);
updateAddContactButtonVisibility();
}
}
openContactFormBtn.addEventListener("click", function (event) {
addContactForm();
});
contactFormsContainer.addEventListener("click", function (event) {
if (event.target && event.target.classList.contains("modal__btn-close")) {
event.target.parentNode.remove();
updateAddContactButtonVisibility();
}
});
Ответы (1 шт):
Автор решения: Дмитрий
→ Ссылка
Решение: заменил DOMContentLoaded на функцию инициализации для клонированных элементов. Спасибо @Simon.
function initializeChoicesInClonedForm(clonedForm) {
const choiceElements = clonedForm.querySelectorAll(".js-choice");
choiceElements.forEach(function (element) {
new Choices(element, {
allowHTML: true,
});
});
}
function addContactForm() {
if (contactFormsContainer.childElementCount < maxContacts) {
let clonedForm = contactFormTemplate.cloneNode(true);
clonedForm.removeAttribute("id");
clonedForm.style.display = "block";
contactFormsContainer.appendChild(clonedForm);
// Инициализируем Choices только внутри новой формы
initializeChoicesInClonedForm(clonedForm);
updateAddContactButtonVisibility();
}
}