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

IT技术 javascript html-select
2021-01-30 01:36:30

代码:

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

6个回答

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

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

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

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

    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
        });
请对该代码添加一些解释,以便其他人可以从中学习
2021-03-28 01:36:30

作为基于@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 上任何人的建议。

我也换innerHTMLtextContent最终,选项中的内容将始终是文本(您不能将 HTML 添加到选项中),因此使用textContent更能描述您最终要做的事情。并且textContentinnerHTML不解析输入的数据性能更高。事实上,基准测试表明,只需更改innerHTMLtextContent就可以将性能提高 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 中确实有效,但它有许多问题。但是,如果您不需要对旧浏览器的支持,那么使用关键字letconst是很好的习惯。

2021 的答案在这里:

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