jQuery selectmenu下拉高度

Question

我想限制下拉列表中的项目数量,让我们说6.完成搜索之后我找不到除提示之外的任何其他东西有maxHeight选项,但似乎没有效果.

HTML:

<label for="files">Select a file:</label>
<select name="files" id="files">
</select>

使用Javascript:

// configure
$( "#files" ).selectmenu({
              icons: { button: "ui-icon-search" } ,
              style: 'dropdown',
              maxHeight: 60
           });
// Test data
for( i = 0; i < 100; i++ )
{
   $('#files').append($('<option/>', { 
        value: "a" + i,
        text : "b" + i
    }));
}

TTFN,Jon

[编辑]为了澄清,我想保留下拉列表中的所有项目,只显示用户滚动的子集,就像普通桌面应用程序中的组合框一样.

Answer 1

您还可以像这样扩展".ui-selectmenu-menu .ui-menu"的CSS类:

.ui-selectmenu-menu .ui-menu {max-height: 200px;}

注意:将此代码添加到单独的css文件中,而不是下载的jqueryUI的css库.

Answer 2

首先,您需要包含menuWidget方法.然后添加具有有限高度值的类.JS代码

$( "#files" )
  .selectmenu()
  .selectmenu("menuWidget")
  .addClass("overflow");

和CSS

.overflow { height: 200px; }

Answer 3

在这里：将 jquery 中的列表限制为一定数量的元素

http://jsfiddle.net/8dgc6jrr/

var LIMIT = 4; // limit to the fourth element
$("option").each(function( index, object ) {
    if(index+1>LIMIT){
        object.remove();
    }
});