22

我正在为 Chrome 中的渲染错误寻找解决方法。当一个选择元素有大约 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（失败）
  • 火狐 21（通过）
  • IE 9（通过）
  • 歌剧 12（通过）
  • Safari 5.1（通过）

在 jsFiddle
备用示例链接上查看示例

更新：我对这个主题做了一些阅读，显然选项不应该隐藏在选择中。您可以禁用选项，但它们不会消失。如果您根本不希望选项出现在选择中，则应该完全删除该节点。隐藏选项的功能似乎不能完全跨浏览器工作，在大多数情况下，您可以使用箭头键继续选择“隐藏”选项。我需要打开和关闭选项，这对我的特殊情况造成了不便，但这似乎是迄今为止唯一可行的方法。

4

7 回答 7

3

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

 $(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 所做的更改。但总的来说，在修复错误之前，我认为这样的事情将与您获得工作选项一样接近。

于 2013-06-20T01:49:31.833 回答
1

As a workaround for this bug I can propose the following solution:

  • To hide an option 'convert' it to some other tag and hide it with .hide().
  • To show an option 'convert' it back to option and show it with .show().

For 'conversion' we need something like this: https://stackoverflow.com/a/9468280.

Example:

// some `replaceTagName` implementation here

// hiding options
$('.option-selector').replaceTagName('span').hide();

// showing options
$('.option-selector').replaceTagName('option').show();

A bit heavy but working :)

于 2014-10-07T06:00:28.587 回答
1

我遇到了这个问题，这就是我所做的：

var originalSelect = $("#the_select").clone();

function hideSomeOptions(){
  $('#the_select .hide_me').remove();
}

function restoreAllOptions(){
  $("#the_select").replaceWith(originalSelect[0]);
}

目标选择输入的 ID 为“the_select”，需要切换的选项或 optgroup 具有“hide_me”类。

于 2015-05-12T17:13:15.750 回答
1

除了 Firefox 之外，所有主要浏览器（Edge、Chrome、Opera 等）都存在该问题。一旦隐藏项目的数量大于 1000，问题就会出现。小心，因为只有 100 个项目，所有浏览器似乎都可以工作

如果活动项目（未隐藏，未禁用）位于列表顶部，问题也会消失。更准确地说，当您单击“选择”输入字段时，浏览器会打开一个列表，其中的行数等于前 1000 个项目中包含的活动项目数。例如，如果您构建一个项目列表，其中前 x 个项目处于活动状态，然后 y 个项目“不活动”（如果 y 大于 1000），然后再次 z 个项目处于活动状态，您将看到一个列表宽 x 行，其中包含 x+z 个项目.

顺便说一句，解决该问题的方法可能是对项目列表进行排序

此行为已在 Chrome、Opera、Edge 上得到验证

于 2021-07-01T16:26:15.843 回答
0

我发现隐藏/可见选项的顺序有所不同。就像 chrome 在第一个隐藏选项处停止计算下拉菜单的高度一样。一种解决方法是将显示的选项移动到选择的顶部。如果您正在使用类似这样的 jquery。

var select = "select#MySelect";
$(select).children("option").hide();  //hide all options
$(select).children("Selector for items to show").each(function(idx, elm) {
           $(elm).parent().prepend(elm);  //move item to the top of parent
});
$(select).children("Selector for items to show").show(); //show selected options
于 2014-08-26T16:50:36.413 回答
0

我遇到了同样的问题（Chrome 40），发现以下解决方法对我很有效。

var originalOptions = [];

$(document).ready(function(){
    originalOptions = $("yourSelect").children("option");

    $("someElement").someEvent(function(){
        $("yourSelect").children("option").remove();
        $(originalOptions).each(function(){
            if(/*criteria here*/){$("yourSelect").append($(this));}
        });
    });
});
于 2015-03-13T18:27:18.003 回答
-1

最好的解决方法是在最后添加

<option></option> 在您的选择元素中。添加此代码：

<optgroup></optgroup>

这将添加一个空白组元素，目前是对这个罕见 BUG 的最佳简单快速修复。

谢谢！

于 2014-01-28T21:36:16.253 回答