Напишите функцию, создающую выпадающий список на веб-странице (HTML select) из массива объектов со значениями

Question

Массив должен содержать объекты со свойствами: value — значение для атрибута value тэга option label — значение для содержимого тэга option (заголовок элемента при открытии списка или выбранного значения) Вторым аргументом функция должна принимать выбранное значение (value выбранного по умолчанию элемента). По умолчанию выбирается 0-й элемент массива значений. Если переданное значение не найдено в массиве элементов, то нужно также выбрать 0-й элемент. Возвращаемое значение — DOM-элемент select.

Собственно в этой задаче мне не понятна сама структура скрипта. Выходит у меня функция с 2 аргументами должна быть, 1 аргумент это массив объектов со свойствами value и label,

и мне не понятен 2-й аргумент.

Вот мой каркас

    let arr = [
    {
       value: "Russia",
       label: 'Russia',
    },
    {
        value:"Germany",
        label:"Germany",
    },
    {
        value:"France",
        label:"France",
    }
]

let body = document.body;
let select = body.appendChild(document.createElement('select'));
let option = select.appendChild(document.createElement('option'));

option.setAttribute('value', arr[2].value)

function func(arr, value) {
    // тут вся логика
}

В этой задаче мне не понятно след предложение: Вторым аргументом функция должна принимать выбранное значение (value выбранного по умолчанию элемента).

Вообщем я не прошу полностью решать, а лишь проверить и дать рекомендации по шаблону задания.

Answer 1

Ну как-то так

let arr = [
    {
       value: "Russia",
       label: 'Russia',
    },
    {
        value:"Germany",
        label:"Germany",
    },
    {
        value:"France",
        label:"France",
    }
]


function createSelect(arr, value) {
    let result = document.createElement('select');
    let valueExists = false;
    arr.forEach(item => {
     let option = document.createElement('option');
     option.value = item.value;
     if (option.value === value) {
      valueExists = true;
      option.selected = true;
     }
     option.text = item.label;
     result.appendChild(option);
    });
    if (!valueExists) result.firstChild.selected = true;
   return result;
}

samplePage.appendChild(createSelect(arr, "Germany"));

samplePage.appendChild(createSelect(arr, "Uzbekistan"));

<div id="samplePage">

Answer 2

const selCont = document.querySelector('.select')

const arr = [
    {
        value: "Russia",
        label: 'Russia',
    },
    {
        value:"Germany",
        label:"Germany",
    },
    {
        value:"France",
        label:"France",
    }
]

const sel = document.createElement('select')

for(let [index, item] of arr.entries()) {
    let el = document.createElement('option')
    index == 0 ? el.setAttribute('selected', '') : false
    el.value = item.value
    el.innerHTML = item.label

   sel.appendChild(el)
    console.log(index , item)
}
selCont.appendChild(sel)

<div class="select"></div>

value нужно для формы, по ней же можно сделать логику на проверку

Answer 3

Сам решил таким способом), Всем спасибо

"use strict";
let arr = [{
    value: "Russia",
    label: 'Russia',
  },
  {
    value: "Germany",
    label: "Germany",
  },
  {
    value: "France",
    label: "France",
  }
]

function createSelectEl(arr, str) {
  const body = document.body;
  const select = body.appendChild(document.createElement('select'));

  arr.forEach(function(el) {
    const option = document.createElement('option');
    option.value = el.value;
    option.innerHTML = el.label;

    select.appendChild(option)
    if (option.value === str) {
      option.setAttribute('selected', true);
    }
  });

  return select
}


createSelectEl(arr, 'Germany')

Answer 4

Твой вопрос помог мне разобраться с эти заданием. В процессе упростил твой код:

let array = [
    { label: 'Russia' },
    { label: "Germany" },
    { label: "France" },
    { label: "USA" }
]

function createSelectEl(arr, str) {
    const select = document.body.appendChild(document.createElement('select'));

    arr.forEach(function(el) {
        const option = document.createElement('option');
        option.innerText = Object.values(el);
        select.appendChild(option)
        if (option.value === str) {
            option.setAttribute('selected', true);
        }
    });

    return select
}


createSelectEl(array, 'France')

БЛОГ НА HUSL

Напишите функцию, создающую выпадающий список на веб-странице (HTML select) из массива объектов со значениями

Ответы (4 шт):