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}在那里，但是这个剂量的工作。

有什么更好的方法吗？我想要能够增加价值，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

我猜你的要求是创建一些选项标签并附加选择-

在你的前排循环中-

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>

​