jQuery 选择菜单下拉高度答案

【问题标题】：jQuery selectmenu dropdown heightjQuery 选择菜单下拉高度
【发布时间】：2014-10-18 12:33:12
【问题描述】：

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

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

【问题讨论】：

越简单越好：stackoverflow.com/a/8788381/2375207 只使用 size 属性
另一个有用的链接（有时你应该挂在那里）w3schools.com/tags/att_select_size.asp
如果你想限制选择中的元素数量，你可以玩一下css。或者 js 通过删除第 n-child >6
@nicolallias，“大小”属性适用于标准 html 选择。然而 jQuery 选择菜单实现忽略了属性'

标签： jquery select-menu

【解决方案1】：

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

http://jsfiddle.net/8dgc6jrr/

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

【讨论】：

重新阅读我的帖子，我认为我的措辞有误，D'oh。我的意思是我想将所有项目保留在下拉列表中，只显示用户可以滚动浏览的其中一部分。
哦，确实，我想你必须玩 vith css ：/

【解决方案2】：

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

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

和 CSS

.overflow { height: 200px; }

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案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 添加到每个菜单（在我的例子中是选择标签）。

【讨论】：