HTML下拉框控件中的选项（值）是否有最大数量限制？

Question

有谁知道下拉列表框最多可以有多少个选项吗？是否没有限制？在性能下降之前最多可以有多少个选项？

- Steve Tranby

---

我知道这个问题很旧了，但是为了将来的参考，我曾经使用过一个包含30800个选项的select框，并且表现得非常好（当PHP脚本没有超时以获取值时）。 - STT LCU

一个更大的问题可能是超时，如果一个 AJAX 数据库查询正在填充列表。所以来到这里的人可能也想在这种情况下搜索 AJAX 超时。 - Scott C Wilson

Answer 1

有人知道下拉列表可以有多少个选项吗？理论上是否无限制？

在理论上，我想是没有限制的，但实际上会受到计算机的RAM和特定浏览器的限制。

多少个选项会导致性能下降？

同样地，这取决于几个因素，至少包括特定的浏览器、计算机的内存和处理能力。

---

编辑：从经验来看，我曾经有一个具有数千个选项的下拉列表。虽然这不是理想的选择，因为谁想要滚动查看所有这些选项呢？这就是为什么某种类型的自动完成更加理想，特别是对最终用户的体验而言。

- JasonBunting

Answer 2

更新：根据DannyG的测试，使用Ubuntu上的Firefox在一台4GB内存电脑上，限制远超过10k标签。我的当前Firefox设置最高可使用3GB，并且已达到了100k选项，但为此，您可能需要更改浏览器的默认配置。

我们选择在给出30个以上选项的所有情况下使用Ajax自动完成作为替代。

在Windows 64位，4GB内存的默认配置下，Firefox和Chrome都限制为10k选项。

使用JSFiddle进行测试 http://jsfiddle.net/Mare6/

for (var i=0; i<10000; i++) {
    var name = "Option "+i;
    var sel = document.getElementById("list");
    sel.options[sel.options.length] = new Option(name,i);
}

<a>Testing Select</a>
<select id="list"></select>

敬礼，

- Katesclau

---

这是非常迷人的，特别是因为Mozilla的文档指出：“允许的内容为零个或多个<option>或<optgroup>元素。”- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select?redirectlocale=en-US&redirectslug=HTML%2FElement%2Fselect - Steve T

不是这样的，我有一个包含80000个选项的选择框，在一台机器上Chrome允许30000个，在另一台机器上允许20800个，第一台机器有8GB的RAM，第二台机器有4GB，所以这主要取决于计算机规格。 - DJG22

Answer 3

是的，至少对于Chrome和Safari浏览器，select元素的最大值为10000个。

在Chrome源代码中，相关行可以在此处找到：最大值为10000，强制限制并将错误记录到控制台的代码。

从我进行的测试中看来，Firefox浏览器似乎没有实际限制。

- Kevin London

Answer 4

如果有帮助的话，我在一个列表中使用了大约500个项目，没有明显的性能影响！

- Ethan Gunderson

---

在移动设备上，情况就不同了。 - Sebas

Answer 5

根据我的经验，性能降低通常出现在用户端。我学到的一个黄金准则是七个选项左右。

在更相关的软件方面，可能是整数的顶级范围。

编辑：顺便说一下，这篇文章Atwood也有相关内容。

- stjohnroe

Answer 6

理论上来说，没有限制，但是一些浏览器会实现限制。（类似于在无限循环中使用document.write）

但是，归根结底，在下拉列表中我最多建议只有大约50个选项，因为没有人想要滚动那么多。话虽如此，如果按字母顺序组织，可能适合在下拉列表中有多达200个项目。（比如在注册表单中必须选择出生国家的情况下。）

此外，当您有许多不同的设置选择时，下拉列表通常是最好的选择。

- Ben