Добавление двух option в один select [js]

Рейтинг: 0Ответов: 1Опубликовано: 26.07.2023

делаю запрос получения option для select, в ответ приходит массив, пробегаю циклом, и через append добавляю option в два select

for (let i = 0; i < data.length; i++) {
   let newOption = document.createElement("option");
   newOption.value = data[num].id
   newOption.text = data[num].name
   selectOne.append(newOption)
   selectTwo.append(newOption)
}

проблема в том, что selectOne заполняется, если смотреть через консоль, но после выполнения остается заполненным только selectTwo, а selectOne пустой

Решил проблему через дублирование newOption, но хотел бы понять, почему первый указанный select вообще очищается?

javascript теория
Источник: Stack Overflow на русском

Ответы

▲ 0

Решил проблему через дублирование newOption, но хотел бы понять, почему первый указанный select вообще очищается?

Ты создал один элемент. Он может быть только в одном "кармане". Или в левом или в правом.

Можно например клонировать элемент для каждого следующего родителя.

const data = [
  {id: 1, name: 'Один'},
  {id: 2, name: 'Два'},
]
for (let i = 0; i < data.length; i++) {
  let newOption = document.createElement("option");
  newOption.value = data[i].id
  newOption.text = data[i].name
  selectOne.append(newOption)
  // клонируем элемент для второго родителя
  selectTwo.append(newOption.cloneNode(true))
}
<select id='selectOne'></select>
<select id='selectTwo'></select>