如何设置最大高度并允许使用jQueryUI选择菜单滚动

Question

我正在尝试使用新的jQueryUI选择菜单小部件来获得<select>下拉列表的自定义样式，并保留完整的功能。但对于大名单来说，这似乎是毫无用处的。在打开它的默认状态时，下拉项只会继续在页面上运行，并且没有启用滚动。我觉得这对于一个插件来说是很奇怪的，它可以替代标准的HTML下拉菜单。

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

这是一个JS Fiddle显示了发生了什么。

Answer 1

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

您只需为<ul>定义一个最大高度即可。

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

注意，如果要调整max-height UI中的任何选择菜单，则可以将jQuery应用于jQuery。

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

希望这会有所帮助:)

Answer 2

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

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