Question

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

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

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

Answer 1

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

您只需要为#countries-menu { max-height: 100px; }定义最大高度：

max-height

请注意，如果您想在jQuery UI中调整任何选择菜单，.ui-selectmenu-menu .ui-menu可以应用于{{1}}。

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

希望这会有所帮助：）

Answer 2

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

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

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

2 个答案: