Динамическое создание списков в JS

Автор вопроса: Дмитрий Белый

Господа, может кто помочь решить такую задачу: есть кнопка при нажатии на которую, каждый раз создается новый список "select" с одним и тем же именем, а элементы "option" получались из базы данных sql.

Источник

Ответы (1 шт):

Автор решения: Mikalai Parakhnevich

Можно использовать такой вариант.

С помощью document.createElement - создаем select, и с помощью document.createElement и HTMLSelectElement.add() - создаем option из вашего списка и добавляем в select

const body = document.body;
const listOptions = ["JS", "HTML", "CSS"];
const listSelects = [];

function createSelect() {
  const select = document.createElement("select");
  listSelects.push(select);
  select.id = `select_${listSelects.length}`;
  select.name = `selectName`;
  body.appendChild(select);

  for (let i = 0; i < listOptions.length; i++) {
    const option = document.createElement("option");
    // option.selected = ...;
    // option.disabled = ...;
    option.value = listOptions[i];
    option.text = listOptions[i];
    select.add(option);
  }
}

<button onClick="createSelect()">Создать select</button>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.