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

Question

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

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

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

Answer 1

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

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

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

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

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

希望这可以帮助 ：）

Answer 2

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

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