如何設置最大高度並允許使用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/