添加选项以使用 javascript 下拉列表答案

【问题标题】：add options to drop down list with javascript添加选项以使用 javascript 下拉列表
【发布时间】：2015-10-21 06:21:35
【问题描述】：

我需要向下拉列表中添加选项。我在下拉列表中有一个包含我需要的选项的数组，但我不确定如何将数组附加到列表中

var productList = document.getElementById("selectFood");
var foodOption = document.createElement("option");

foodOption.textContent = [{ 
    option1: "Meat Lovers"
}, {
    option2: "Buffalo Wings"
}, {
    option3: "margherita"
}, {
    option4: "classic"
}];

for (i = 0; i < productList.length; i++) { 
    productList.appendChild(foodOption);
}

【问题讨论】：

textContent 数组非常很奇怪。它是一个对象数组，其中每个对象都只有一个属性，并且这些属性都有不同的名称。如果你能改变它，我建议你改变它。

标签： javascript list drop-down-menu

【解决方案1】：

你可以用 jquery 来做，

$.each(foodOption.textContent, function (i, value) {
    $('#selectFood').append($('<option>').text(value).attr('value',value));
});

【讨论】：

他要求用 java 脚本解决。但是这个 jQuery 看起来很棒

【解决方案2】：

您需要创建一个选项元素。

for (i = 0; i < foodOption.textContent.length; i++) {
   var newElement = document.createElement('option');
   newElement.innerHTML = foodOption.textContent[i];
   productList.appendChild(newElement);
}

【讨论】：

我做了我的选项元素是foodOption
@Matt 你追加了你创建的所有对象 foodOption 是 javascript 中的一个变量，用于将其转换为 html，你首先需要创建一个 html 选项元素。然后那个元素你需要附加它。在您的代码中，您尝试在每次 for 运行时附加一个数组。你明白其中的区别吗？

【解决方案3】：

你必须创建一个字符串数组而不是对象数组

试试这个

 foodOption.textContent = ["Meat Lovers" , "Buffalo Wings" , "margherita", "classic" ]


$.each(foodOption.textContent, function (index, value) {

    $('#selectFood').append($('<option/>', { value: value, text: value }));

});

【讨论】：

【解决方案4】：

试试下面的代码来解决你的问题。

var productList = document.getElementById("selectFood");
var textContent = [{ 
    option1: "Meat Lovers"
}, {
    option2: "Buffalo Wings"
}, {
    option3: "margherita"
}, {
    option4: "classic"
}];

for(var iIntex in textContent) {
    var foodOption = document.createElement("option");
    var option=textContent[iIndex]["option"+(iIndex+1)];
    foodOption.setAttribute("value",option);
    foodOption.innerHTML=option;
    productList.appendChild(foodOption);
}

【讨论】：