Как реализовать создание точно такого же select-элемента при нажатии на кнопку?

Как перерасположить добавляемый элемент select под уже существующими элементами в ячейке?
  • 3 октября 2023 г. 7:57
Ответы на вопрос 2
Для реализации создания точно такого же select-элемента при нажатии на кнопку можно воспользоваться JavaScript. Вот пример кода, демонстрирующего такую реализацию:

HTML:

```html
<button id="addButton">Добавить select</button>
<div id="container"></div>
```

JavaScript:

```javascript
// Получаем кнопку и контейнер
const addButton = document.getElementById("addButton");
const container = document.getElementById("container");

// Обработчик клика по кнопке
addButton.addEventListener("click", function() {
  // Создаем новый select-элемент
  const select = document.createElement("select");

  // Копируем опции существующего select-элемента, если таковой имеется
  const existingSelect = container.querySelector("select");
  if (existingSelect) {
    const options = existingSelect.querySelectorAll("option");
    options.forEach(option => {
      const newOption = document.createElement("option");
      newOption.text = option.text;
      newOption.value = option.value;
      select.appendChild(newOption);
    });
  }

  // Добавляем созданный select-элемент в контейнер
  container.appendChild(select);
});
```

Чтобы перерасположить добавляемый элемент select под уже существующими элементами в ячейке, можно использовать CSS свойство `display: block;` для всех select-элементов в контейнере. Это позволит располагать элементы в вертикальном порядке. 

CSS:

```css
select {
  display: block;
}
```

Теперь каждый раз при нажатии на кнопку "Добавить select" будет создаваться новый select-элемент, который будет располагаться под уже существующими элементами в ячейке.
Выбирайте элемент с помощью функции "select", клонируйте его с использованием метода "cloneNode" и вставляйте склонированный элемент последним с помощью метода "appendChild". Выполните эти действия при клике на кнопку.
Похожие вопросы