Задать вопрос
Gavr_Gavr
@Gavr_Gavr
javascript

Почему заполняется только один select?

HTML:

<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title></title>
</head>

<body>

 <select>
 </select>
               
 <select>
 </select>
 
</body>
</html>


JS:
let metrics = {
   "baseMetric": "cm",
   "convertRules": {
      "m": {
         "label": "meter",
         "baseMetric": "100"
      },
      "in": {
         "label": "inch",
         "baseMetric": "2.54"
      },
      "ft": {
         "label": "foot",
         "baseMetric": "30.48"
      },
      "mm": {
         "label": "Millimeter",
         "baseMetric": "0.1"
      },
      "km": {
         "label": "Kilometer",
         "baseMetric": "100000"
      },
      "yd": {
         "label": "Yard",
         "baseMetric": "91.44"
      }
   }
}


const selects = document.querySelectorAll('select');

 function addMetricsToSelect(metrics) {
      for (let [key, value] of Object.entries(metrics.convertRules)) {
         let option = document.createElement('option');
         option.text = value.label
         option.value = key
         
         selects[0].appendChild(option)
         selects[1].appendChild(option)
         
      }
   }
   addMetricsToSelect(metrics);


Заполняется только тот select который будет стоять последним. Причем значение в первый тоже попадают но сразу же удаляются, почему так происходит? Вот ссылка на фидл
  • Вопрос задан
  • 53 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript 
selects[0].appendChild(option)
selects[1].appendChild(option)

Как один элемент может одновременно находится внутри двух других элементов? Очевидно же, что никак:

Если данный дочерний элемент является ссылкой на существующий узел в документе, то функция appendChild() перемещает его из текущей позиции в новую позицию

Это должны быть два разных option'а. Можете во втором случае добавлять копию, типа

selects[1].appendChild(option.cloneNode(true))

Или собирайте html вместо создания отдельных элементов:

const optionsHTML = Object
  .entries(metrics.convertRules)
  .map(n => `<option value="${n[0]}">${n[1].label}</option>`)
  .join('');

selects.forEach(n => n.innerHTML = optionsHTML);
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать сайт на React согласно пакету требований
03 мая 2024, в 10:29
2000 руб./за проект
Доработать веб-приложение на React + TypeScript
03 мая 2024, в 10:14
20000 руб./за проект
Написать игру PacMan с помощью Atari на Python
03 мая 2024, в 10:02
1000 руб./за проект
Ещё заказы