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

Question

I need to add options to a drop down list. I have an array with the options that I need in the drop down list, but I'm not sure how to append the array to the list

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);
}

Answer 1

you can do with jquery,

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

Answer 2

You need to create an option element.

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

Answer 3

You have to make an array of string rather than array of objects

try this

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


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

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

});

Answer 4

Try below code for your solution.

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);
}