Для создания точной копии элемента select при нажатии на кнопку в JavaScript, вы можете использовать следующий подробный подход:
- Создайте кнопку в HTML. Пример:
<button id="cloneBtn">Клонировать select</button>
- Создайте функцию в JavaScript, которая будет вызываться при нажатии на кнопку:
document.getElementById("cloneBtn").addEventListener("click", function() { // ваш код здесь });
- Внутри функции создайте новый элемент 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;
- Добавьте новый select в DOM, после исходного select:
originalSelect.parentNode.insertBefore(newSelect, originalSelect.nextSibling);
- Если вы также хотите скопировать выбранное значение из исходного select в новый select, добавьте следующий код:
newSelect.value = originalSelect.value;
- Наконец, если у вас есть какие-либо обработчики событий для исходного 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 под уже имеющимся.