Как создать выпадающий список из массива?

Question

Ибрагим

javascript

Как создать выпадающий список из массива?

Как создать выпадающий список из массива `info.technologies` и добавить его на страницу?

13 февраля 2024 г. 17:08

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для создания выпадающего списка из массива `info.technologies` и добавления его на страницу можно использовать следующий код на JavaScript с использованием HTML и CSS:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      min-width: 160px;
      z-index: 1;
    }
    
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
  </style>
</head>
<body>
  <div class="dropdown">
    <button class="dropdown-btn">Выберите технологию</button>
    <div class="dropdown-content" id="dropdown-content">
    </div>
  </div>

  <script>
    var technologies = info.technologies; // Предполагается, что `info.technologies` уже существует и содержит массив данных

    var dropdownContent = document.getElementById('dropdown-content');
    for (var i = 0; i < technologies.length; i++) {
      let option = document.createElement('a');
      option.textContent = technologies[i];
      dropdownContent.appendChild(option);
    }
    
    // Дополнительная логика для обработки событий или выбора выбранной технологии
  </script>
</body>
</html>
```

В этом коде мы создаем `div` с классом "dropdown", который содержит кнопку с классом "dropdown-btn" и `div` с классом "dropdown-content". Стилизация выпадающего списка осуществляется с помощью CSS.

Затем мы используем JavaScript, чтобы получить список технологий из массива `info.technologies` и создать `a` элементы для каждой технологии. Мы добавляем созданные элементы в `div.dropdown-content`.

Вы можете добавить дополнительную логику для обработки событий или выбора выбранной технологии, например, при щелчке на элемент списка.

Answer 2

1. Классика, цикл for {} 
 
 2. Цикл for..in 
 
 3. Цикл for..of 
 
 4. Метод массива forEach() 
 
 5. Метод массива reduce()