При работе с веб-разработкой вы часто можете столкнуться с ситуациями, когда вам необходимо сопоставить массив данных с тегом select для динамического заполнения параметров. В этой статье мы рассмотрим пять различных методов достижения этой цели с помощью JavaScript. Каждый метод будет сопровождаться примером кода для лучшего понимания. Давайте погрузимся!

Метод 1: использование цикла for

const array = ['Option 1', 'Option 2', 'Option 3'];
const selectTag = document.getElementById('mySelect');
for (let i = 0; i < array.length; i++) {
  const option = document.createElement('option');
  option.text = array[i];
  selectTag.appendChild(option);
}

Метод 2: использование функции карты

const array = ['Option 1', 'Option 2', 'Option 3'];
const selectTag = document.getElementById('mySelect');
array.map((item) => {
  const option = document.createElement('option');
  option.text = item;
  selectTag.appendChild(option);
});

Метод 3. Использование функции forEach

const array = ['Option 1', 'Option 2', 'Option 3'];
const selectTag = document.getElementById('mySelect');
array.forEach((item) => {
  const option = document.createElement('option');
  option.text = item;
  selectTag.appendChild(option);
});

Метод 4. Использование оператора расширения и функции карты

const array = ['Option 1', 'Option 2', 'Option 3'];
const selectTag = document.getElementById('mySelect');
[...array].map((item) => {
  const option = document.createElement('option');
  option.text = item;
  selectTag.appendChild(option);
});

Метод 5. Использование свойства InnerHTML

const array = ['Option 1', 'Option 2', 'Option 3'];
const selectTag = document.getElementById('mySelect');
selectTag.innerHTML = array.map(item => `<option>${item}</option>`).join('');