隐藏了许多选项时,选择元素下拉列表中的Chrome错误

Question

我正在寻找Chrome中渲染错误的解决方法.当select元素具有大约90%+隐藏选项元素时,它会显示出来.在Chrome中,下拉高度太短而无法使用.这似乎不会发生在其他浏览器上.查看jsFiddle上的示例.

HTML Example
Note: Some options were removed to keep the code brief.
The bug does not show up unless all options are present.

100 Options, 90% Hidden:<br>
<select>
<option value="">Select an Option</option>
<option value="0" style="display: none">Option 0</option>
<option value="1" style="display: none">Option 1</option>
<option value="2" style="display: none">Option 2</option>
<option value="3" style="display: none">Option 3</option>
<!-- Options removed for brevity. -->
<option value="86" style="display: none">Option 86</option>
<option value="87" style="display: none">Option 87</option>
<option value="88" style="display: none">Option 88</option>
<option value="89" style="display: none">Option 89</option>
<option value="90">Option 90</option>
<option value="91">Option 91</option>
<option value="92">Option 92</option>
<option value="93">Option 93</option>
<option value="94">Option 94</option>
<option value="95">Option 95</option>
<option value="96">Option 96</option>
<option value="97">Option 97</option>
<option value="98">Option 98</option>
<option value="99">Option 99</option>
</select>

浏览器测试:

• Chrome 27和28(失败)
• Firefox 21(通行证)
• IE 9(通行证)
• 歌剧12(通行证)
• Safari 5.1(通行证)

查看有关jsFiddle
备用示例链接的示例

更新:我做了一些关于这个主题的阅读,显然选项不应该隐藏在选择中.您可以禁用选项,但它们不会消失.如果您不希望选项完全在选择中,则应该完全删除该节点.隐藏选项的功能似乎不能完全跨浏览器工作,并且在大多数情况下,您可以使用箭头键继续选择"隐藏"选项.我需要打开和关闭选项,这使得这对我的特殊情况不方便,但这似乎是到目前为止唯一可行的方法.

Answer 1

添加这个可能被认为是一种解决方法：

 $(document).ready(function () {

    $('#ph2').mouseenter(function () {

      var html = '';

        $(this).find('option').each(function () {

            if ($(this).css('display') !== 'none') {

                html = html + '<option>' + $(this).text() + '</option>';   
            }
        });

        $(this).html(html);
    })
});

这是jsFiddle；我使用 jquery 只是为了简单起见。在本例中，我只是在 mouseenter 上重做 HTML。这并不理想，但它可以让你走得更远。另请注意，您已在 HTML 中将 ph2 设置为 div；我认为你应该从一开始就将它设置为选择元素，并且在小提琴上你可以看到我对 html 所做的更改。但总的来说，在错误修复之前，我认为类似的事情将尽可能接近您获得一个可行的选择。