如何在 javascript 中填充选择元素的选项

Question

编码：

 var newSelect=document.createElement('select');
index=0;
var optn = document.createElement("option");

//langArray is an array that contains different items..the size
//is not fixed for this array.

for(element in langArray)
{
   //Now i want to assign each item in langArray to each option tag
   //will it be sumthng like "optn.options[index]=new Option("Sports", "sportsvalue", true,  false);
   //optn.accept(langArray[0]);
   index++;
}

我试图通过这种方式填充选项，但它并没有正常出现，因为我不知道如何从 JS 中的数组填充选项。我什至必须使用循环，或者我是否可以将 langArray 分配给 select 元素的某些属性，并且每件事都将启动并运行？

原文由 samach 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在循环内创建选项；

 for(element in langArray)
{
   var opt = document.createElement("option");
   opt.value= index;
   opt.innerHTML = element; // whatever property it has

   // then append it to the select element
   newSelect.appendChild(opt);
   index++;
}

// then append the select to an element in the dom

原文由 Ibu 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您需要在循环中创建 option 元素，设置属性和文本并将其附加到 select 元素：

 var select = document.createElement('select'),
    option,
    i = 0,
    il = langArray.length;

for (; i < il; i += 1) {
    option = document.createElement('option');
    option.setAttribute('value', langArray[i].value);
    option.appendChild(document.createTextNode(langArray[i].text));
    select.appendChild(option);
}

这假设您的 langArray 看起来像这样：

 var langArray = [
    {value: "val1", text: "text 1"},
    {value: "val2", text: "text 2"}
];

您需要调整代码以匹配您的数组

原文由 James Long 发布，翻译遵循 CC BY-SA 3.0 许可协议