过滤后如何防止<select>高度缩小？答案

【问题标题】：How to prevent <select> height from shrinking after filtering?过滤后如何防止<select>高度缩小？
【发布时间】：2014-07-11 02:21:13
【问题描述】：

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 中打开小提琴。单击<select>。观察它的高度。单击按钮。再次打开<select>。请注意它有多短，尽管其中仍然有很多值。

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

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

【问题讨论】：

stackoverflow.com/questions/570642/…
@Mark 显然就是这样，你无能为力...：/
我想我知道为什么会这样。尝试从禁用的项目 css 中删除 display:hidden 并计算下拉菜单的高度。一旦项目被禁用，它们的总高度就会从最初计算的下拉高度中减去。我试图弄清楚如何绕过这个......
@Banana 我认为您的计数理论可能是正确的。这是另一个令人不安的演示：jsfiddle.net/z56Vq/3 Readonly 与禁用项具有相同的效果。但有趣的是，<select multiple="multiple" /> 显示的选项应该是display: none;，甚至开发人员工具也显示......奇怪。更新：在 Firefox 中检查。当您在“只读”（不是多个）下打开第二个选择并选择一个时，它会突然隐藏应该立即隐藏的第一个元素。
@Banana 我认为这只是意味着他们不愿意修复它，因为只有 7 人关心它。基于您的“数组”建议I came up with this。我们不需要使用数组并重新创建元素，但我们确实需要维护对 DOM 外部选项的引用。这应该维护任何属性、类以及添加到选项中的任何其他内容。

标签： javascript jquery html css google-chrome

【解决方案1】：

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

如果您希望正确计算高度，则必须从 DOM 中实际删除 <options>。

【讨论】：

【解决方案2】：

试试这个：

你可以给onchange，这样代码就可以工作了。

这是你的答案FIDDLE

代码：

 <select onchange="(this.value)">
</select>

【讨论】：

我不明白。你在哪里定义了showdropdown 函数？
@Mark：我的回答有什么问题，showdropdown 功能是我自己给的。
我对你的回答投了反对票，因为你的小提琴不能解决马克的问题
@Banana：他要求下拉菜单应该有一个相应的高度，现在它工作正常，那你为什么不投票给我的答案。
@KesaVan 因为它没有，在 chrome 中它仍然会在你的小提琴中改变高度。