如何设置最大高度并允许使用 jQueryUI Selectmenu 滚动 [重复]答案

【问题标题】：How to set a max height and allow scrolling with jQueryUI Selectmenu [duplicate]如何设置最大高度并允许使用 jQueryUI Selectmenu 滚动 [重复]
【发布时间】：2019-05-28 19:31:11
【问题描述】：

我正在尝试使用新的jQueryUI selectmenu 小部件为我的<select> 下拉菜单获取自定义样式并保留全部功能。但对于大型列表，它似乎几乎没有用。在打开时的默认状态下，下拉项目只是在页面外运行，并且没有启用滚动。对于一个可以替换标准 HTML <select> 下拉菜单的插件，我觉得这很奇怪。

有没有办法解决这个问题，例如在显示的下拉项目上设置最大高度并启用滚动？也许我错过了一个 API 选项。我想这可以通过一些有创意的 CSS 来完成？

Here is a JS Fiddle 显示发生了什么。

【问题讨论】：

标签： javascript jquery css jquery-ui jquery-ui-selectmenu

【解决方案1】：

确实有一种方法可以做到这一点，幸运的是，它非常简单！ :)

您只需为<ul> 定义一个最大高度：

#countries-menu {
    max-height: 100px;
}

请注意，如果您想调整 jQuery UI 中的任何选择菜单，则可以将 max-height 应用于 .ui-selectmenu-menu .ui-menu。

更新小提琴：https://jsfiddle.net/mjfnao1L/1/

希望这会有所帮助:)

【讨论】：

太棒了，谢谢！我会给你打勾，因为你是第一个回答的。

【解决方案2】：

如果要将高度设置为可视高度的百分比，可以使用下面的代码。这会将其设置为可视高度的 90%，这将允许具有更大屏幕的用户看到更多选项：

#countries-menu {
  max-height: 90vh;
}

【讨论】：

那90vh 会很有用，谢谢！