setAttribute JavaScript

Question

var addColor = [
            {
                "option": "opt1",
                "value": "empty",
                "id": "white",
                "name": "Color"
            },
            {
                "option": "opt2",
                "value": "#60afdc",
                "id": "blue",
                "name": "Blue #60afdc"
            },
            {
                "option": "opt3",
                "value": "#f4a700",
                "id": "yellow",
                "name": "Yellow #f4a700"
            },
            {
                "option": "opt4",
                "value": "#c70049",
                "id": "ruby",
                "name": "Ruby-red #c70049"
            },
            {
                "option": "opt5",
                "value": "#000",
                "id": "black",
                "name": "Black #000"
            },
        ]

        function addCol() {
            console.log(addColor);
            addColor.forEach((opt, i) => {
                **opt1**.setAttribute('value', `${opt.value}`);
                **opt1**.setAttribute('id', `${opt.id}`);
                **opt1**.innerHTML = `${opt.name}`;
                select.appendChild(**opt1**);
            });
        }
        addCol();

Как мне добавить opt1? Я пытался добавить, ${opt.option} там, но это не работает.

Есть ли более хороший способ сделать это? Я хочу, чтобы можно было легко добавить значение, идентификатор и имя, если я выберу новый цвет в раскрывающемся списке.

Answer 1

 const select = document.getElementById('select');
        function addCol() {
            addColor.forEach((opt, i) => {
             let op = document.createElement('option');
            op.value = opt.value;
            op.innerHTML = opt.name;
            op.id=opt.id;
            select.appendChild(op);
            });
        }
        addCol();

Answer 2

Я предполагаю, что вам нужно создать несколько тегов параметров и добавить, чтобы выбрать -

Сделайте это в вашем foreach l oop -

addColor.forEach((opt) => {
    var option = document.createElement('option')
    option.setAttribute('value', opt.value);
    option.setAttribute('id', opt.id);
    option.innerHTML = opt.name;
    select.appendChild(option);
});

Answer 3

Вы можете создать option, используя document.createElement и добавить необходимые атрибуты

var addColor = [{
    "option": "opt1",
    "value": "empty",
    "id": "white",
    "name": "Color"
  },
  {
    "option": "opt2",
    "value": "#60afdc",
    "id": "blue",
    "name": "Blue #60afdc"
  },
  {
    "option": "opt3",
    "value": "#f4a700",
    "id": "yellow",
    "name": "Yellow #f4a700"
  },
  {
    "option": "opt4",
    "value": "#c70049",
    "id": "ruby",
    "name": "Ruby-red #c70049"
  },
  {
    "option": "opt5",
    "value": "#000",
    "id": "black",
    "name": "Black #000"
  },
]
const select = document.getElementById('select');

function addCol() {
  addColor.forEach((opt, i) => {
    const currElem = document.createElement('option');
    currElem.setAttribute('value', `${opt.value}`);
    currElem.setAttribute('id', `${opt.id}`);
    currElem.innerHTML = `${opt.name}`;
    select.appendChild(currElem);
  });
}
addCol();

<select id='select'></select>