JavaScript - 是否有更有效的方法来创建选项元素？

我正在尝试创建一个包含10,000个选项的html选择列表。由于这个数字，我需要它尽可能高效。我已经得到它的工作，但我认为这是相当低效JavaScript - 是否有更有效的方法来创建选项元素？

var select = document.createElement("select"); 
document.body.appendChild(select); 

for (var i = 1; i <= 10000; i++) { 
    var option = document.createElement("option"); 
    var optionText = option.createTextNode("option" + i); 
    option.value = "option" + i; 
    option.appendChild(optionText); 
    select.appendChild(option); 
}

我读过，查询DOM太多可能是昂贵的。有没有更简单的方法来做到这一点？

来源

2016-03-06 user5680735

昂贵的东西反复从DOM阅读之后改变DOM。仅仅改变DOM并不是那么昂贵。但是，从用户体验方面来说，如果你给他们10000项选择，你的用户会讨厌你。带着*激情*。在你的鞋子里，我会努力想出一个替代的UI解决方案。 – Amadan

注意，最好在最后追加'select'，一旦它拥有所有''选项''。 – Oriol

我想看看从另一个角度这个问题。作为一个用户，我甚至可以容忍生成这个列表的两秒钟（最有可能甚至在不好的电话上也只需要不到2秒），但是迫使我从10k个元素的下拉列表中选择一个元素 - 这是一个矫枉过正。

我会完全抛弃一个“创建选项”，并会调查更好的（从UI角度来看）的方法。就像select autocomplete（这只是一个例子）。

P.S.如果你真的真的希望你的用户受到滚动10k元素的影响，我建议把这部分select.appendChild(option);放在循环之外。生成你想追加的所有内容并一次添加它们。

来源

2016-03-06 01:14:17

感谢您指出这一点。您可以显示的选项数量是否有UX限制？ 1000还是太多了？ 100？如果你需要在下拉列表中存储城市列表 – user5680735

没有硬性限制，这意味着你不能说145太多了，但140是好的。这主要是一个特定的人可以容忍多少。我会说（但我不是UI专家），如果滚动列表大于屏幕的3/4 - 这太多了。如果你需要一个城市名单，我会在开始时要求一个人选择一个国家（如果你想去美国孟菲斯，选择一个埃及孟菲斯将是愚蠢的）。然后我会允许人们输入开头并为他们自动填充其他内容。 –

可以使用Option constructor：

构造函数被提供用于创建HTMLOptionElement 对象（除了从DOM工厂方法如 createElement()）：
Option(text, value, defaultSelected, selected)
当援引为一个构造函数，它必须返回一个新的对象（一个新的option元素）。

如果第一个参数是不是空字符串，则新对象必须作为其唯一的孩子一个Text节点，其数据的该参数的值。否则，它一定没有孩子。

如果value参数存在，新对象必须具有value属性与参数作为其值的值设置。

如果defaultSelected参数为true，则新对象必须具有selected属性，且该值不带值。

如果参数selected为真，则新对象必须将其selectedness设置为true;否则即使参数为真， selectedness也必须设置为false。

在你的情况，

select.appendChild(new Option("option" + i));

来源

2016-03-06 00:57:28 Oriol

-1

请使用innerHTML，如果你想高性能

我下面给你一个jsperf：

http://jsperf.com/js-appendchild/3

来源

2016-03-06 03:06:31 zeromike

JavaScript - 是否有更有效的方法来创建选项元素？

回答

相关问题