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

Question

我正在尝试使用新的jQueryUI selectmenu小部件来为我的<select>下拉列表定制样式，并保留全部功能。但是对于大型列表来说，它似乎实际上没有用处。在打开时的默认状态下，下拉菜单仅保持离开页面，并且没有启用滚动。我觉得这是一个奇怪的插件，可以取代标准的HTML <select>下拉菜单。

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

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

Answer 1

确实有这样做的方式，幸运的是，它非常简单！ :)

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

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

注意，max-height可以改为适用于.ui-selectmenu-menu .ui-menu，如果你想调整jQuery UI的任何选择菜单。

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

希望这有助于:)

Answer 2

如果你想设置高度为可视高度的百分比，可以在下面使用此代码。这将其设置为可见高度的90％，这将允许用户有更大的屏幕来查看更多选项：

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

https://jsfiddle.net/yoate65g/