Question

为什么我在谷歌浏览器中的下拉只有一行可滚动？而不是多行可滚动？这是我的HTML代码：

<select>
        <option style="display:block;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
</select>

但是，如果我将所有显示：块项目移动到顶部并且所有显示：无项目到底部，则下拉列表再次可以滚动多行。为什么我不能用display：none选项启动列表？

Answer 1

浏览器使下拉列表的高度呈现为第一批可见项目的高度，达到特定大小。但是你会注意到，如果你把两个放在顶部，你得到两条线，三条可见线给出三条线，依此类推。其他选项仍然存在，因为您可以使用滚动条访问它们，但滚动条没有按正确的数量进行操作。

以这种方式隐藏选项可以在更多的浏览器中使用。我的建议是从选择本身中删除不需要的选项，而不是使用display:none。

Answer 2

Chrome会考虑前20个可见选项来计算下拉高度，然后您会看到滚动条以查看剩余选项。这就是为什么你只看到前20个选项中的块元素的原因。

了解更多信息：Refer accepted answer

Chrome-显示：选择中没有选项

2 个答案: