Question

<select>菜单遇到了一个奇怪的问题。当我点击它（或最小化它）后返回包含<select>的页面时，<select>有时会崩溃并变得无法响应。我检查了所有代码，它是100％有效的，我进一步看到这种情况也发生在其他网站上。

我在最新版本的Safari（适用于OSX 10.6.8）以及最新版本的Chrome和Firefox（在Windows Vista和OSX 10.6.8上都经过测试）中经历了<select>菜单折叠。奇怪的是，我无法重现在Windows 8上运行的Chrome中的<select>崩溃...最后一点：似乎<select>元素的长度会影响菜单崩溃的可能性（也就是说，<option>中的<select>元素越多，崩溃的可能性就越大。有时候<select>菜单会在被选中并点击一次后崩溃，有时它会崩溃可以尝试5次或6次。

我的问题是：导致此<select>崩溃问题的原因是什么？是否有一项已知的工作？请参阅下面的示例代码，它非常简单，但<select>菜单在我之前提到的浏览器/操作系统中已经崩溃了。提前谢谢！

<!doctype html>
<html>
<head>
  <title>Select Test</title>
</head>

<body>
 <select name ="Test">
  <option value = "0">0</option>
  <option value = "1">1</option>
  <option value = "2">2</option>
  <option value = "3">3</option>
  <option value = "4">4</option>
  <option value = "5">5</option>
  <option value = "6">6</option>
  <option value = "7">7</option>
  <option value = "8">8</option>
  <option value = "9">9</option>
  <option value = "10">10</option>
  <option value = "11">11</option>
  <option value = "12">12</option>
  <option value = "13">13</option>
  <option value = "14">14</option>
  <option value = "15">15</option>
  <option value = "16">16</option>
  <option value = "17">17</option>
  <option value = "18">18</option>
  <option value = "19">19</option>
  <option value = "20">20</option>
  <option value = "21">21</option>
  <option value = "22">22</option>
  <option value = "23">23</option>
  <option value = "24">24</option>
  <option value = "25">25</option>
  <option value = "26">26</option>
  <option value = "27">27</option>
  <option value = "28">28</option>
  <option value = "29">29</option>
  <option value = "30">30</option>
  <option value = "31">31</option>
  <option value = "32">32</option>
  <option value = "33">33</option>
  <option value = "34">34</option>
  <option value = "35">35</option>
  <option value = "36">36</option>
  <option value = "37">37</option>
  <option value = "38">38</option>
  <option value = "39">39</option>
  <option value = "40">40</option>
  <option value = "41">41</option>
  <option value = "42">42</option>
  <option value = "43">43</option>
  <option value = "44">44</option>
  <option value = "45">45</option>
  <option value = "46">46</option>
  <option value = "47">47</option>
  <option value = "48">48</option>
  <option value = "49">49</option>
  <option value = "50">50</option>
  <option value = "51">51</option>
  <option value = "52">52</option>
  <option value = "53">53</option>
  <option value = "54">54</option>
  <option value = "55">55</option>
  <option value = "56">56</option>
  <option value = "57">57</option>
  <option value = "58">58</option>
  <option value = "59">59</option>
  <option value = "60">60</option>
  <option value = "61">61</option>
  <option value = "62">62</option>
  <option value = "63">63</option>
  <option value = "64">64</option>
  <option value = "65">65</option>
  <option value = "66">66</option>
  <option value = "67">67</option>
  <option value = "68">68</option>
  <option value = "69">69</option>
  <option value = "70">70</option>
  <option value = "71">71</option>
  <option value = "72">72</option>
  <option value = "73">73</option>
  <option value = "74">74</option>
  <option value = "75">75</option>
 </select>
 </body>
</html>

更新以下是在OSX 10.6.8上运行的Safari 5.1.9中折叠/无响应<select>菜单的屏幕截图（这是一个与我之前使用的不同的mac）。 3次尝试后（选择一个选项，然后单击浏览器），它变得没有响应。单击时它不会显示选项列表，并且在重新加载页面之前完全没有响应。我很快就会在Mac上下载chrome。

Screenshot

更新2： 根据@ webdad3，这个问题也出现在IE9中

更新3：

这是我在上面发布的源代码的链接，但在JSbin中。感谢@starbeamrainbowlabs。

http://jsbin.com/eXOMeRI/1/edit

更新4：

根据@ Zarazthuztra，OSX 10.8中也出现了这个问题。

更新5：

我正在接受@ cloudcoder2000的建议并在问题本身中发布此链接。我相信这表明<select>不应该崩溃（就像我们很多人一样），无论它包含<option>的数量。

Is there a max number of options (values) in HTML drop down control?

到目前为止，我还要感谢大家的帮助。

更新6： 我担心这个问题开始停滞不前......如果有人有任何关于造成这个问题的理论（无论看起来有多么“离谱”）让我知道，我会尽快测试。

更新7： 请确认：我在几个不使用Javascript的页面上遇到过这个崩溃问题。此外，上面发布的示例代码（不包含任何Javascript）已经为我和其他一些stackoverflow用户（跨不同的操作系统和浏览器）折叠了。

更新8：

@Capile能够重现在Mac OS X 10.9.1上运行的Safari 7.0.1中的崩溃问题。

更新9： 通过使用@Capile的代码，我能够在Safari 5.1.10中运行<select>到“解除崩溃”（在OSX 10.6.8上运行）。请阅读他的答案以获取详细信息。我将在今天或明天晚些时候在Chrome和Firefox中测试他的代码。这真的很有希望，我想我们已经接近解决这个问题了。到目前为止，我再次感谢大家的帮助，你们真棒！

更新10： 我终于有机会在我的一台Snow Leopard（10.6.9）机器上测试Chrome中的@Capile代码。这次让<select>崩溃我遇到了一些麻烦，但经过几分钟的尝试后，终于做到了。将他的代码粘贴到控制台后<select>“uncollapsed”（尽可能不优雅）。这很奇怪，因为如果这个“崩溃”问题与系统级垃圾收集有关，那么人们会认为a <select>会在浏览器中相当一致地“崩溃”，但事实并非如此。我测试了无数的浏览器（跨多个操作系统）和<select>“崩溃”在某些浏览器（例如Safari）中似乎非常普遍......我当然不是专家程序员所以我可能错了，但无论如何，我只是想更新这个问题，以便更多的人可以考虑新的信息。

更新11： 我只是为这个问题添加了一笔赏金，试图产生更多的兴趣（我希望它有所帮助）。无论如何，我昨晚能够让<select>在最新版本的Firefox（在OSX 10.6.9上运行）中崩溃。遗憾的是我没有机会在Firefox中测试@Capile的代码，但我今天会尝试这样做。

Answer 1

由于操作系统在几个浏览器中处理<select>元素UI（这使得它们的完整样式更加复杂或不可能），我猜这是操作系统级别的错误，或者是一个错误与某些OS UI功能相关的浏览器 - 绝对不是源HTML的问题，这很简单并且根据规范而定。）

对于浏览器，<select>元素是完全正常的：您可以在DOM上看到它，甚至可以操纵它（它也会监听事件）。如果您将其分离并重新连接到DOM，它将再次正常工作（打开并启用选择）。如果您只是在控制台窗口运行下面的代码，您将再次使用它：

var s=document.getElementsByTagName('select'),
    i=s.length,
    a=document.createElement('div'),
    b;
while(i-->0) {
    s[i].parentNode.insertBefore(a, s[i]);
    b=s[i].parentNode.removeChild(s[i]);
    a.parentNode.insertBefore(b,a);
    a.parentNode.removeChild(a);
    b=null;
}

我的猜测是，当浏览器模糊时，UI元素可能被某种操作系统垃圾收集器捕获，当你回到浏览器时，它只是希望操作系统再次显示它（但它可以'找到它）。但这只是猜测 - 我需要对Safari内存进行分析才能真正实现它。

我可以在Mac OS X 10.9.1上运行的Safari 7.0.1上复制它，但无法在Firefox 28.0a2（Aurora）或Chrome 34（Canary）上复制它。

Answer 2

正如评论中所提到的，这似乎是滞后的。无论是由您的计算机规格，浏览器，插件/扩展程序或页面上的其他内容引起的，您都不能在选择中添加75个选项并期望Safari和IE跟上 。我不确定滞后是否会导致页面冻结并迫使用户重新加载它，但老实说我不知道还有什么可能导致它。

我不确定你需要75个选项的选择，但是如果你确实需要它，我建议你输入一个简单的文本输入来限制用户可以输入1-75。是的，它不像下拉选择那么简单和优雅，但它可以完成工作，你不必担心毛刺。

Answer 3

Aaaahhhh，这是一个远景，但是......

尝试删除HTML属性中的空格（不在引号内），因此value = "0"变为value="0"。

Answer 4

我已经看到了与select元素类似的行为，但通常不是问题的原因。如果基本浏览器组件滞后，那么通常是因为后台运行的脚本占用了所有浏览器资源。您粘贴在整个页面上方的页面是否也在页面上运行了重要的javascript？

Answer 5

在等待更新/补丁时找到适合您的浏览器。每当遇到浏览器问题时，我通常会在Firefox，Google Chrome和IE之间切换。

至于您的代码，我建议您查看JavaScript，通过将所有硬编码的<option>转换为动态内容，可以让您的生活更轻松。类似的东西：

// Starting from index 0, 
// create an <option> with the value of the current index
// keep creating <option> until you hit index 75.

Answer 6

您遇到与<select>无关的问题。

有些（如果不是大多数）DHTML网络应用程序逻辑与“后退”和“前进”按钮不兼容，这些几乎都是历史。

您提供的源代码是正常的。

更新浏览器或将其更改为能够完成任务的其他浏览器。在您的浏览器中有任何问题与普通选择约75项 - 联系您的浏览器提供商。

select中元素数量的限制确实存在。我们受每个应用程序的内存量限制 - 取决于平台和剩余内存量。浏览器有一些内部元素集合，这些集合仅限于一些数量。每个应用都是如此。虽然这些限制远不是几百个项目，但选择可能包含更多，但渲染它们是另一个痛苦。在某些内部网应用程序中，ppl每次选择使用数千个选项，多次选择75个。

检查你的JS，你可能有一个脚本处理select元素导致它行为不端。

UPD：可能是

的问题

 <!doctype html>

到目前为止，这是非标准的5。 03.2014 （有关更多信息，请查看http://www.w3.org/html/wg/drafts/html/master/）

尝试

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

阻止浏览器尝试解析HTML ver 5。

Answer 7

这里你的问题解决方案使用javascript作为选择标签中的打印值，如：

对于（I = 1969; I＆LT; = 2014;我++） { 文件撰写（ '' + I + ''）; }

HTML Select菜单随机无响应

7 个答案: