如何设置最大高度并允许使用 jQueryUI Selectmenu 滚动

Question

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

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

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

Answer 1

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

您只需为 <ul>:

定义一个最大高度

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

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

已更新 fiddle：https://jsfiddle.net/mjfnao1L/1/

希望对您有所帮助:)

Answer 2

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

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