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

守则：

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

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

---

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

您可以在循环中创建选项

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

---

一个肮脏的选项是使用divs并根据前面的选择填充select字符串innerHTML。您仍然可以如上所述使用langArray。

另一种方法：

     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的select级别设置的css样式。 会稍微慢一点。

---

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

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循环。但这并不是说这是正确的或唯一正确的答案。总是，总是，总是考虑你的个人使用要求超过任何人在互联网上的建议。< /P> 我还将innerHTML替换为textContent。最终，选项中的内容将始终是文本。您无法将HTML添加到选项中，因此使用textContent更能说明您最终将要做的事情。textContent比innerHTML性能更好，因为它不解析输入的数据。事实上，一个基准测试表明，只需将innerHTML更改为textContent即可

因此，对于将来阅读您的代码的人来说，这可能会更具性能和可维护性。在本例中，与for循环不同，我认为不在innerHTML上使用textContent没有任何好处

表演 需要注意的一点是for-in循环比forEach循环性能更好。虽然这有点微不足道，尤其是在上下文中，而且在我看来，您应该始终优先考虑可维护性而不仅仅是速度。。。除非性能是衡量您所做事情的重要标准，例如，如果您定期迭代1000个值，并且遇到瓶颈。正如那句老话所说，过早的优化是万恶之源

最终，JS的维护人员将致力于提高大多数使用的结构的性能，在大多数情况下，性能的影响可以忽略不计，并且随着设备功能的增强和解析器的优化，性能的影响可能会随着时间的推移而降低

然而，一个不容易维护的应用程序的性能实际上可能非常高。而且只会上升，因为随着时间的推移，在引入更多bug之前，可维护性差。现在剃掉一个圈0.002ms不会有任何明显的影响。未来的开发人员试图向元素添加标记，因为他们读取innerHTML=。。。并假设他们可以添加HTML将对未来产生影响

旧浏览器的旁注 forEach方法在所有情况下都有效，但在IE11或更低版本中不起作用。为此，您需要polyfill或使用类似服务将代码编译成ES6之前的格式

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

2021答案如下：

const select_elem=document.createElement'select'； langArray.forEachd=>选择_elem.addnew Optiond.display，d.value；

---

请给代码添加一些解释，以便其他人可以从中学习。为什么您说for循环比for in或forEach循环更容易理解，为什么它稍微慢一些？为什么要使用jQuery？

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

     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
     } 

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