设置属性 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}，但这确实有效。

有没有更好的方法来做到这一点？如果我在下拉列表中想出一种新颜色，我希望能够轻松地添加值、id 和名称。

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 循环中执行此操作-

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

您可以使用document.createElement 创建option 并添加必要的属性

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>