Chrome中选择列表上的滚动条

Question

我在搜索框中有两个下拉菜单，一个是“YearFrom”和一个“YearTo”。

如果在“YearFrom”中未选择任何内容，则“YearTo”框看起来有点像这样：

然而，功能是，一旦选择“YearFrom”，“YearTo”字段仅提供年后可用的内容。实质上，我们最终得到这样的HTML：

<select>
<option value="">Any</option>
<option value="1950" disabled="disabled" style="display: none;">1950</option>
<option value="1960" disabled="disabled" style="display: none;">1960</option>
...
<option value="2011" style="">2011</option>
<option value="2012" style="">2012</option>
<option value="2013" style="">2013</option>
</select>

因此隐藏了YearFrom值以下的任何年份。然而，我们最终得到的是选择列表，如下所示：

所以它不是一个下拉，就像现在是一个带有滚动条的小盒子。

作为参考，在任何其他浏览器中都不会发生这种情况。例如这就是它在Firefox中的样子。

Answer 1

我也遇到过这个错误。

我的猜测是，Chrome浏览器会通过测量选项和选项组的高度来计算下拉高度，但会停止计算它遇到没有高度或显示的元素的时刻：无。

要在我自己的代码中解决这个问题，我会在每次更新后动态重新排列选项，以便display：none元素位于列表的底部。它会产生另一个视觉错误（下拉右侧的空白区域），但我可以使用那个。