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

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

Answer 2

2021 年答案在这里：

const select_elem = document.createElement('select');
langArray.forEach(d=> select_elem.add(new Option(d.display,d.value)));

Answer 3

您需要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"}
];

您需要调整代码以匹配您的阵列

Answer 4

    var dynamicSelect = document.getElementById("selectID");

        langArray.forEach(function(item){ 
        {
                var newOption = document.createElement("option");
                newOption.text = item.toString();//item.whateverProperty

                dynamicSelect.add(newOption);

                //new select items should populated immediately
        });

Answer 5

作为基于@Ibu（当前接受且完全有效）答案的更“最新”的方法，您可以forEach在 JavaScript 中使用该方法，如下所示：

let select_elem = document.createElement('select');

langArray.forEach((element, index) => {
  let option_elem = document.createElement('option');
  
  // Add index to option_elem
  option_elem.value = index;
  
  // Add element HTML
  option_elem.textContent = element;
  
  // Append option_elem to select_elem
  select_elem.appendChild(option_elem);
});

使用forEach方法跟踪它自己的索引，这意味着您不需要手动跟踪您的索引（使用类似var i=0; [...] i++）并且 - 我认为 - 比for循环更整洁，更易于维护。毕竟，您不需要在循环外创建任何变量，也不需要手动增加这些变量，因此，如果在var i其他地方使用索引变量（例如）（例如，如果您有一个循环内循环）。

应该注意的是，此建议是在上下文中提出的 - 最终将存在for循环何时是最佳选择以及何时循环是最佳选择的上下文forEach。由于我个人优先考虑可维护性而不是速度，因此我会默认选择forEach循环。但这并不是说它是正确或唯一正确的答案。始终，始终，始终考虑您的个人使用要求，而不是 Internet 上任何人的建议。

我也换innerHTML了textContent。最终，选项中的内容始终是文本（您不能将 HTML 添加到选项中），因此使用textContent更能描述您最终要做的事情。并且textContent比innerHTML不解析输入的数据更高效。事实上，基准测试表明，只需更改innerHTML为textContent就可以将性能提高超过 x2.5。

因此这很可能是更好的性能和更高的可维护性对于那些阅读你的代码的未来。在这种情况下，与for循环不同，我认为不使用textContentover没有任何好处innerHTML。

表现

需要注意的一件事是for-in循环比forEach循环更高效。尽管这有点微不足道（尤其是考虑到上下文），但在我看来，您应该始终将可维护性置于单纯的速度之上……除非性能是您所做工作的重要标准（例如，如果您要迭代 1000 多次值定期并遇到瓶颈）。不过，正如一句老话所说，“过早的优化是万恶之源”。

最终，JS 的维护者将努力提高最常用构造的性能，并且在大多数情况下，性能损失可以忽略不计，并且可能会随着设备变得更强大和解析器不断优化而随着时间的推移而减少。

然而，一个不容易维护的应用程序的性能确实可以非常高。并且只会上升，因为随着时间的推移，可维护性差会导致更多的错误被引入。现在将循环减少 0.002 毫秒不会对未来产生任何明显影响。未来的开发人员试图为元素添加<strong>标签，<option>因为他们阅读innerHTML = ...并假设他们可以添加 HTML将对未来产生影响。

旧浏览器的旁注

该forEach方法适用于所有常绿浏览器，但不适用于 IE11 或更低版本。为此，您需要使用 polyfill 或使用Babel 之类的服务将代码编译为 ES6 之前的格式。

对于旧版浏览器，您可能还需要将let关键字更改var为。该let关键字在 IE11 中确实有效，但它有许多问题。如果您不需要对旧浏览器的支持，使用关键字let和const是很好的习惯。