Javascript 将数组连接到下拉列表；

我试图将JSON对象数组与下拉列表相关联，但我不知道如何将数组初始化为下拉列表。我试过这个：

 function Save() {
    colors.nextColor.push({
    "name": document.getElementById("name").value,
    "rgb": document.getElementById("colordisplay").innerHTML,
    "opacity": document.getElementById("div").style.opacity
});

//pass the array into the dropdown list

var select = document.getElementById("selectColor");
    for (var i = 0; i < colors[i].length; i++) {
    var opt = colors[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);

    console.log(colors);
}
}

我得到了未捕获的TypeError：无法读取未定义的属性“length”，这里是项目jsbin.com/eXAligom/1

var select = document.getElementById("selectColor");
for (var i = 0; i < colors[i].length; i++) {
    var opt = colors[i];
    var el = document.createElement("option");
    el.innerHTML = opt;
    el.value = opt;
    select.appendChild(el);
    console.log(colors);
}

---

如果我理解正确，我会将保存功能更改为：

function Save() {
colors.push({
    "name": document.getElementById("name").value,
    "rgb": document.getElementById("colordisplay").innerHTML,
    "opacity": document.getElementById("div").style.opacity
});
//pass the array into the dropdown list
var select = document.getElementById("selectColor");
    var opt = colors[colors.length-1],
        el = document.createElement("option"),
        desc = 'N: ' + (opt.name || 'unnamed') + ' RGB: ' + opt.rgb + ' O: ' + (opt.opacity || '0') ;
    el.innerHTML = desc;
    el.value = desc;
    select.appendChild(el);
    console.log(colors);}

---

这些变化几乎是不言自明的

永远不要使用.innerHTML属性，尤其是对于元素。因为innerHTML非常慢。关于标签，有一个特殊的属性名为.text。我仍然得到未捕获的TypeError：无法读取未定义的属性'length'，这里是项目可能是您的颜色数组未定义，