javascript - 如何防止过滤后 <select> 高度缩小？

Question

fiddle

HTML

<select>
    <option class="a">aaaaa</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
</select>
<button>click me</button>

JavaScript

$('button').on('click', function(ev) {
    ev.preventDefault();
    $('.a').prop('disabled',true);
    if($('select').find('option:selected').prop('disabled')) {
        $('select').find('option:enabled:first').prop('selected',true);
    };
});

CSS

option[disabled] {
    display: none;
}

在 Chrome 中打开 fiddle 。点击 <select> .观察它的高度。单击按钮。打开<select>再次。请注意它短了多少，尽管其中仍然有很多值。

为什么 Chrome 会过度缩短下拉列表？我希望它的自然高度是多少，它应该与你第一次打开它时的高度相同。我可以强制 Chrome 重新计算其自然高度吗？

This example应该更清楚。弹出每个选择。请注意，尽管显示的值相同，但它们的高度不同。

Answer 1

It's a bug (感谢 Nico 找到这个)还有 no workaround (感谢 Banana)。

如果你想正确计算高度，你必须实际删除 <options>来自 DOM。