Question

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

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，乔恩

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

Answer 1

您还可以扩展＆＃34; .ui-selectmenu-menu .ui-menu＆＃34;的CSS类。像这样：

{{1}}

注意：将此代码添加到下载的css以外的单独css文件中 jqueryUI库。

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();
    }
});

Answer 4

在我的情况下，我为每个要更改高度的菜单添加了css代码：

CSS:
#yourMenuID-menu {
  max-height: 300px;
}

HTML:
<select id="yourMenuID" size="6" class="form-control">
  <option value="" selected>All</option>
</select>

“ - menu”由jQuery UI添加到每个菜单（在我的情况下选择标签）。

jQuery selectmenu下拉高度

4 个答案: