【问题标题】：How to populate the options of a select element in javascript如何在javascript中填充选择元素的选项
【发布时间】：2011-09-29 20:54:11
【问题描述】：

代码：

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 元素的某些属性，然后一切都会启动并运行？

【问题讨论】：

标签： javascript html-select

【解决方案1】：

您需要在循环中创建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"}
];

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

请对该代码添加一些解释，以便其他人可以从中学习

【解决方案4】：

一个肮脏的选择是使用 div 并根据之前的选择填充选择字符串 (innerHTML)。你仍然可以使用上面提到的 langArray。

【讨论】：

【解决方案5】：

另一种方法：

     for (let i = 0; i < langArray.length; i++) {
        let opt = document.createElement("option");
        opt.value = langArray[i].id; //or i, depending on what you need to do
        opt.innerHTML = langArray[i].name; 
        $('#some-input').append(opt); //Chuck it into the dom here if you want
     }

For 循环通常更易于理解。
在循环期间添加选项将避免覆盖可能在 HTML 的“选择”级别设置的 css 样式。
会稍微慢一些。

【讨论】：

为什么你说for 循环比for-in 或forEach 循环更容易理解，为什么它会稍微慢一些？为什么要使用 jQuery？

【解决方案6】：

作为基于@Ibu（当前已接受且完全有效）答案的更“最新”方法，您可以使用forEach method in 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++ 的东西）而且——我认为——比@987654329 更整洁、更易于维护@ 环形。毕竟，您不需要在循环之外创建任何变量，或者手动增加这些变量，因此，如果索引变量（例如，var i）在其他地方使用（例如，如果你在一个循环中有一个循环）。

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

我还把innerHTML 换成了textContent。最终，选项中的内容将始终是文本（您不能将 HTML 添加到选项中），因此使用 textContent 更能描述您最终将要做的事情。而且textContent 比innerHTML 性能更高，因为它不解析输入的数据。事实上，基准测试表明，只需将innerHTML 更改为textContent 即可improve performance by over x2.5。

因此，对于将来阅读您的代码的人来说，这可能会提高性能和。在这种情况下，与for 循环不同，我认为不使用textContent 而不是innerHTML 没有任何好处。

性能

需要注意的一点是for-in 循环比forEach 循环的性能更高。虽然这有点微不足道（特别是考虑到上下文），但在我看来，您应该始终优先考虑可维护性而不是单纯的速度......除非性能是您所做工作的重要标准（例如，如果您正在迭代超过 1000 次）值的定期和遇到瓶颈）。还是那句老话，“过早的优化是万恶之源”。

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

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

旧版浏览器的附注

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

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

【讨论】：

【解决方案7】：

2021 年的答案在这里：

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

【讨论】：