javascript - 如何在 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 元素的某些属性，然后所有东西都会启动并运行？

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

2023 年更新:

为了确保避免创建全局变量并保持在正确的范围内，我们可以使用 map() 和 let。

let selectTag = document.createElement('select');
langArray.map( (lang, i) => {
    let opt = document.createElement("option");
    opt.value = i; // the index
    opt.innerHTML = lang;
    selectTag.append(opt);
});