html - 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 浏览器通过测量选项和 optgroups 的高度来计算下拉高度，但在遇到没有高度或显示为无的元素时停止计算。

为了在我自己的代码中解决这个问题，我在每次更新后动态重新排列选项，以便 display:none 元素位于列表的底部。它会创建另一个视觉错误（下拉列表右侧的空白），但我可以忍受那个错误。