Html 当许多选项被隐藏时，选择元素下拉列表中的Chrome错误

我正在寻找解决Chrome中渲染错误的方法。当一个select元素有大约90%以上的隐藏选项元素时，它就会显示出来。在Chrome中，下拉高度变得太短，无法使用。这似乎不会发生在其他浏览器上

已测试的浏览器：

Chrome 27和28失败 Firefox21通行证 IE 9通行证 歌剧院12关 Safari 5.1通行证

---

更新：我读了一些关于这个主题的文章，很明显选项不应该隐藏在select中。您可以禁用选项，但它们不会消失。如果您根本不想在select中包含一个选项，那么应该完全删除该节点。隐藏选项的功能似乎不能完全跨浏览器工作，在大多数情况下，您可以继续使用箭头键选择隐藏的选项。我需要打开和关闭选项，这会给我的特殊情况带来不便，但这似乎是迄今为止唯一有效的方法。

添加此选项可能会被视为一种解决方法：

 $(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);
    })
});

---

这是我的答案；我使用jquery只是为了简单。在这种情况下，我只是在mouseenter上重做HTML。这并不理想，但可以让你走得更远。另外，请注意，在HTML中将ph2设置为div；我认为您应该从一开始就将其设置为select元素，在小提琴上可以看到我对html所做的更改。但是总的来说，在bug被修复之前，我认为类似这样的东西将尽可能地让您有一个工作选项。

最好的修复方法是在最后一个选项的末尾添加

在您的Select元素中。添加此代码：

这将添加一个空白组元素，目前是解决这一罕见错误的最好方法

---

谢谢

我发现隐藏/可见选项的顺序不同。这就像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

---

作为此错误的解决方法，我可以提出以下解决方案：

要隐藏选项，请将其“转换”为其他标记并使用.hide隐藏。 要显示选项，请将其“转换”回选项并使用.show显示。 对于“转换”，我们需要如下内容：

例如：

// some `replaceTagName` implementation here

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

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

---

有点重，但工作正常：

我在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));}
        });
    });
});

---

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

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

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

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

---

目标选择输入的ID为_select，需要切换的选项或选项组的ID为hide _me类。

您发现了一个很好的错误@谢谢你。我已经向谷歌报告过了，但同时我还需要找到一个解决办法。Mac上的Chrome 28显示的都是相同的，它显示了所有隐藏的项目。看起来这个Chrome bug已经修复了！我想这个bug又出现在Chrome78上了，我已经向谷歌提交了一份报告，这是一个JS版本的新bug，需要超过100+1才能修复。我需要能够切换选项，这样的修复不会让事情变得那么容易。实际上，这似乎不是一个bug，而是更多未定义的功能。我更新了我的答案以包含这些信息。那么也许你可以将选项存储在键值对象中。在这个对象中，您将跟踪切换的可见内容，然后在单击或鼠标输入时使用该对象重做HTML。看看我在这里的另一个答案：对于对象模式。这对我来说是第一次，但因为我也在更改页面上单独隐藏的值，“html”不会存储将来可能选择的任何项目，你知道我该如何解决这个问题吗？好吧，然后将每个选项的状态存储在一个单独的对象中，并使用该对象确定在重新生成元素时在HTML中包含哪些选项。可以使用key:value，其中key是选项，value存储选项是否可见。请参阅我上面的评论中的答案。此解决方案无法解决您仍然可以使用键盘选择隐藏选项的问题。无论如何，很容易修复：将.prop{disabled:true}添加到第二行。

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

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

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