Для создания точной копии элемента select при нажатии на кнопку в JavaScript, вы можете использовать следующий подробный подход:
1. Создайте кнопку в HTML. Пример: <button id="cloneBtn">Клонировать select</button>
2. Создайте функцию в JavaScript, которая будет вызываться при нажатии на кнопку:
document.getElementById("cloneBtn").addEventListener("click", function() { // ваш код здесь });
3. Внутри функции создайте новый элемент select и скопируйте все его атрибуты из исходного элемента:
var originalSelect = document.getElementById("originalSelect"); // исходный select var newSelect = document.createElement("select"); // новый select // Копирование атрибутов newSelect.innerHTML = originalSelect.innerHTML; newSelect.id = originalSelect.id; newSelect.name = originalSelect.name;
4. Добавьте новый select в DOM, после исходного select:
originalSelect.parentNode.insertBefore(newSelect, originalSelect.nextSibling);
5. Если вы также хотите скопировать выбранное значение из исходного select в новый select, добавьте следующий код:
newSelect.value = originalSelect.value;
6. Наконец, если у вас есть какие-либо обработчики событий для исходного select, вы также можете скопировать их на новый select, чтобы сохранить функциональность:
var originalSelectEvents = getEventListeners(originalSelect); // получение обработчиков событий var newSelectEvents = getEventListeners(newSelect); // Копирование обработчиков событий for (var eventName in originalSelectEvents) { originalSelectEvents[eventName].forEach(function(event) { newSelect.addEventListener(eventName, event.listener); }); }
Теперь, при нажатии на кнопку, будет создаваться точная копия элемента select под уже имеющимся.