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

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

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

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

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

Но вообще, вариант так себе. Появится ещё один select - побежите копипастить строку с добавлением option'а? Надо сделать цикл по select'ам. Например, так:

selects.forEach(function(n) {
  n.append(...this.map(m => new Option(m[1].label, m[0])));
}, Object.entries(metrics.convertRules));

Или, можно собирать 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 FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо поменять пароль в WINDOWS
24 нояб. 2024, в 03:11
500 руб./за проект
Требуется консультация по UX-дизайну казино
24 нояб. 2024, в 01:35
5000 руб./за проект
Расширение для браузера
24 нояб. 2024, в 01:24
500 руб./за проект
Ещё заказы