HTML选择菜单随机变得不响应。

Question

HTML选择菜单随机变得不响应。

32

我在使用 <select> 菜单时遇到了一个奇怪的问题。当我点击它之后（或将其最小化）回到包含 <select> 的页面时，<select> 有时会折叠并变得无响应。我检查了所有代码，它是100%有效的，而且我也在其他网站上看到了这种情况。

我在最新版本的Safari（适用于OSX 10.6.8），Chrome和Firefox（在Windows Vista和OSX 10.6.8上测试过）中经历了 <select> 菜单折叠的问题。奇怪的是，我无法在运行在Windows 8上的Chrome中复现 <select> 折叠问题...... 最后一个细节： <select> 元素的长度似乎会影响菜单折叠的概率（也就是说，<select> 中有越多的 <option> 元素，折叠的可能性就越大）。有时选择并退出一次后，<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>

更新： 以下是Safari 5.1.9运行在OSX 10.6.8上的折叠/无响应的<select>菜单的截图（这是不同于我之前使用的那台Mac）。在尝试3次后（选择选项，然后点击浏览器外部），它变得无响应。当单击时不会显示选项列表，并且在重新加载页面之前完全无响应。我将很快在这台Mac上下载Chrome。

屏幕截图

更新2： 根据@webdad3的说法，IE9也存在此问题

更新3：

这里是我上面发布的源代码的链接，但在JSbin中。由@starbeamrainbowlabs提供。

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

更新4：

根据@Zarazthuztra的说法，OSX 10.8也存在此问题。

更新5：

我采纳了@cloudcoder2000的建议，并在问题本身中发布了此链接。我相信它表明，无论<option>的数量是多少，<select>都不应该折叠（像我们中的许多人一样）。

HTML下拉控件中是否存在选项（值）的最大数量？

我也要感谢大家迄今为止的帮助。

更新6： 我担心这个问题开始停滞...如果有人对导致此问题的原因有任何理论（无论它似乎有多“离奇”），请告诉我，我会尽快进行测试。

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

更新8：

@Capile能够在Mac OS X 10.9.1上运行Safari 7.0.1时复制折叠问题。

更新9： 使用 @Capile 的代码，我在运行于OSX 10.6.8的Safari 5.1.10中得以实现<select>的“展开”。请查看他的答案获取完整详情。今天或明天我将在Chrome和Firefox中测试他的代码，这真是令人兴奋，我认为我们已经接近解决问题了。再次感谢大家提供的帮助，你们太棒了！

更新10： 我终于有机会在我的Snow Leopard（10.6.9）机器上在Chrome中测试@Capile的代码。这次我遇到了一些麻烦，很难使<select>折叠，但经过几分钟的尝试，它终于做到了。将他的代码粘贴到控制台后，<select>“展开”了（用不太文雅的话说）。这非常奇怪，因为如果这种“折叠”问题与系统级垃圾回收有关，那么人们会认为<select>在不同浏览器中应该相对一致地“折叠”，但实际情况并非如此。我在多个操作系统上测试了各种浏览器，发现在某些浏览器（如Safari）中<select>的“折叠”现象非常普遍……我承认自己不是专业程序员，所以可能说的不对，但无论如何，我只是想更新这个问题，让更聪明的人能够思考新信息。

更新11： 我刚刚在此问题上添加了奖励，希望能引起更多兴趣（希望有些帮助）。昨晚我在运行于OSX 10.6.9的最新版本Firefox中成功使<select>折叠。不幸的是，我没有时间在Firefox中测试@Capile的代码，但我会尽量在今天进行测试。

- Elle

2

嗯，@user2569147，我在Linux 12.10中使用Chrome 31.0.1650.63测试过了，无法重现这个错误。也许可以尝试更新浏览器，但我不确定会有帮助。 - Atutouato

1

通过@Atutouato的jsbin示例，我能够在IE9中复现您的问题。 - webdad3

1

我也遇到了这个问题。我的猜测是，这可能是这些浏览器使用的HTML5实现中的一个缺陷，因为它只出现在较新版本和跨操作系统上。这只是一种理论，但无论如何都要点赞。 - Zarathuztra

1

好的，你现在正式成为一个好人。 - dthree

3

仅供记录，我在以下环境中测试了这个小提琴：Win7/IE11、Win7/FF、XP/Opera、XP/IE8、XP/FF、XP/Safari、XP/Chrome。所有浏览器的最新版本（当然除了IE8），所有的XP版本都在VirtualBox PC上运行。我无法复制这个问题。我的显卡是nVidia GeForce 8800，CPU是I3-2100 @3.1 GHz。 - kuroi neko

显示剩余50条评论

7个回答

3

您遇到的问题与

- Konstantin Ivanov

感谢您的回复，但是再次强调一下：这个问题存在于多种操作系统上的多个浏览器中，即使页面不包含Javascript，问题仍然存在。 - Elle

在我看来：你的“select”没有问题。提供的HTML示例唯一的问题是DTD版本5（它还不是标准），如果你将其删除或替换为ver.4-应该可以在任何非HTML5浏览器中正常工作。 - Konstantin Ivanov

谢谢@KonstantinIvanov！我之前使用的是Chrome，现在换成Firefox后就没有问题了。我也升级了Chrome版本，现在一切都正常了。 - Papouche Guinslyzinho

2

如评论中所述，这似乎是延迟引起的。无论是由于您计算机的规格、浏览器、插件/扩展还是页面上的其他原因，您不能在下拉选择框中放置75个选项并期望Safari和IE跟上。我不确定延迟是否会导致页面冻结并强制用户重新加载，但我真的不知道还有什么其他原因可能导致这种情况发生。

我真的不确定您在哪里需要一个带有75个选项的下拉选择框，但如果您确实需要它，我建议使用简单的文本输入框，限制用户可以输入1-75的内容。是的，它不像下拉选择框那样简单优雅，但它能完成工作，并且您不必担心故障。

- hkk

4

感谢你的回复。我见过一些（非常）长的下拉菜单，它们运行得非常完美（主要是“选择您的国家”下拉菜单）。我非常感激你的建议，但即使只有4或5个选项，这种下拉菜单也可以折叠起来（尽管这种情况不太常见）。如果可能的话，我想找出这个问题的根源。再次感谢您的建议！ - Elle

这是个不错的猜测，你提到的可用性问题很好（所以我不会给它点踩）。然而，即使在速度较慢的设备上，75个元素对于浏览器来说也是微不足道的。可能确实存在与项目数量相关的错误（例如IE9在有序列表方面存在严重问题），但问题的根本原因可能与性能无关。@user2569147 - 这只是一个长期的尝试，但请记住像select这样的元素经常呈现在阴影DOM中。这可能会为您进一步调查提供一些信息。FWIW，在PC上，我无法在Chrome或Safari中复制您的问题。 - Tim M.

如果您只有4或5个选项时遇到此错误，则您的浏览器/计算机肯定存在问题。即使在旧版浏览器中，“select”也是一个非常基本的元素，应该无缝渲染。如果Safari无法处理仅有4个选项（这是非常常见的），即使偶尔出现，我相信苹果也会立即修复此错误。我知道之前已经提到过这一点，但请确保没有任何插件、扩展、脚本、后台应用程序、恶意软件或其他可能导致此故障的东西。 - hkk

@user2569147 我知道这不是一个明确的答案，也不是能够彻底解决这个问题的“正确”答案，但除非你能找出问题出在哪里，否则这将是你最好的选择。 - hkk

1

@user2569147 谢谢你的链接。我认为它与这个问题如此密切相关，以至于你可以在问题本身中提供一个链接。再次强调，这个答案并不是最终答案，只是根据我们拥有的信息做出的最佳猜测，所以需要谨慎对待。我无法复制这个问题，但如果它在多台计算机上出现过，那么你是正确的——它可能不是特定于计算机的问题。 - hkk

显示剩余8条评论

1

当等待更新/补丁时，找到适合您的浏览器。每当我遇到浏览器问题时，我通常会在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.

- Marlo C

1

啊啊啊，这是一个冒险，但是...

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

- Henry Blyth

6

为了安全起见，我会测试你的想法。但是，如果这就是导致崩溃问题的原因，我需要一个神经科医生和一位好的石膏板维修人员的联系方式... - Elle

我刚按照你的建议，从<option>标签中删除了空格。不幸的是，这并没有解决问题，在运行在OSX 10.6.8上的Safari 5.1.9中，下拉菜单在两次尝试后仍然折叠。还是谢谢你的建议！ - Elle

3

以一种奇怪的方式，我很高兴那没能解决问题，因为这样你就不会被打伤头部了！我也会做同样的事情。感谢（在此插入神/亲戚/宠物/巧克力），我们的头已经安全了！但是我们的心智呢？呃... - Henry Blyth

哈哈。这真是一个令人发狂的问题。不过还是谢谢你的建议，祝你新年快乐！ - Elle

1

我曾经看到选择元素有类似的行为，但通常不是问题的原因。如果基本的浏览器组件滞后，那么通常是因为后台有长时间运行的脚本消耗了所有浏览器资源。你贴上来的页面是整个页面还是还有重要的JavaScript在运行？

- Lucas

感谢您的回复 @Lucas！我在我的问题中发布的示例代码（不包含任何Javascript）在使用多个不同的浏览器时已经崩溃了（尽管我发现在运行Safari 5.1.9时问题最为突出）。我已经更新了我的问题以使其更加清晰明了。再次感谢！ - Elle

-1

在这里使用 JavaScript 打印选择标记中的值，例如：

for(i=1969;i<=2014;i++) { document.write(''+i+''); }

- V_Rajput

6

这会如何有助于解决问题？这两个解决方案似乎做的事情完全相同，只是将通常保留在HTML中的结构移动到通常用于获取/处理数据/添加交互性的脚本语言中。如果您之前曾复制过该问题（我无法复制），并且这样修复了它，那太好了，但我想知道原因。我不太确定这会如何有所帮助，因为生成的HTML完全相同。 - hkk

感谢您抽出时间来帮助。然而，我同意@cloudcoder2000的看法，我真的不知道这怎么解决问题...您能否复制该问题？ - Elle

我不建议使用JavaScript操作<option>元素，因为可能会得到奇怪的结果：http://stackoverflow.com/questions/9129166/trying-to-hide-some-options-tag-with-jquery-doesnt-work-ie-safari-and-opera - Zarathuztra

现在查看代码并将其放在脚本标签之间。这将有助于您的代码。 - V_Rajput

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Capilé · Accepted Answer

由于在一些浏览器中，<select> 元素的 UI 是由操作系统处理的（这使得它们的完整样式更加复杂或不可能），我猜想这是操作系统级别上的错误，或者与某些操作系统 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)中无法复制。