7

我想限制下拉列表中的项目数，可以说是 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，乔恩

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

4

4 回答 4

11

您还可以像这样扩展“.ui-selectmenu-menu .ui-menu”的 CSS 类：

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

注意：将此代码添加到单独的 css 文件中，而不是下载的 jqueryUI 的 css 库。

于 2015-07-03T14:08:58.747 回答
10

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

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

和 CSS

.overflow { height: 200px; }
于 2014-12-13T19:06:32.317 回答
0

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

http://jsfiddle.net/8dgc6jrr/

var LIMIT = 4; // limit to the fourth element
$("option").each(function( index, object ) {
    if(index+1>LIMIT){
        object.remove();
    }
});
于 2014-08-25T11:42:12.317 回答
0

在我的情况下，我为每个想要更改高度的菜单添加了 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 添加到每个菜单（在我的例子中是选择标签）。

于 2015-09-17T08:01:22.010 回答