jquery ui selectmenu滚动条不起作用答案

【问题标题】：jquery ui selectmenu scrollbar not workingjquery ui selectmenu滚动条不起作用
【发布时间】：2012-07-15 02:35:37
【问题描述】：

我使用 jquery 选择菜单插件。我已经用

初始化了选择

$('select').selectmenu({width:100, maxHeight:300, style: 'dropdown'});

我有很多选项，这会导致出现默认浏览器滚动条，但我无法使用它。如果我单击并尝试拖动此栏，则选择菜单将关闭。我可以用鼠标滚轮滚动。 css 和各种插件可能存在一些冲突。但我不确定从哪里开始寻找。

任何想法，可能导致此问题的原因是什么？

【问题讨论】：

你的选择器应该是$('select') -- 缺少引号
这不是问题的原因，只是我的复制能力很差:)

标签： javascript jquery jquery-ui jquery-plugins select-menu

【解决方案1】：

您可以设置选择菜单在 CSS 中打开时内容的最大高度，然后它将在可以使用的项目列表中显示一个滚动条。

ul.ui-menu { max-height: 420px !important; }

如果您使用的其他 jQuery UI 小部件包含分配了“ui-menu”类的

元素，您可能需要在 CSS 中进一步限制这种样式更改。

【讨论】：

我使用的是 JQuery 1.11.3，这个解决方案对我有用！正如问题所说，我还必须进行初始化：$('select').selectmenu({width:100, maxHeight:420, style: 'dropdown'});

【解决方案2】：

针对JQueryUI demo page的“选择号码”示例给出了解决方案：

$('select').selectmenu().selectmenu("menuWidget").css("height","200px");

【讨论】：

【解决方案3】：

好像是js文件这一段有问题：

// document click closes menu
$( document ).bind( "mousedown.selectmenu-" + this.ids[ 0 ], function( event ) {
    //check if open and if the clicket targes parent is the same
    if ( self.isOpen && !$( event.target ).closest( "#" + self.ids[ 1 ] ).length ) {
        self.close( event );
    }
});

滚动条符合“if”子句中的条件，所以选择菜单关闭...

您可以在“if”子句中注释该行，直到有人为此错误提供解决方案。这样，选择菜单在点击退出时不会关闭，但在选择任何选项时会关闭...

编辑：

好的，现在可以了。用这个改变之前显示的部分：

$( document ).bind( "mousedown.selectmenu-" + this.ids[ 0 ], function( event ) {
    //check if open and if the clicket targes parent is the same
    if ( self.isOpen && !$( event.target ).closest( "#" + self.ids[ 1 ] ).length && !$(event.target).hasClass('ui-selectmenu-menu-dropdown')) {
        self.close( event );
    }
});

这样，由于滚动条是“ui-selectmenu-menu-dropdown”类的div的一部分...移动滚动条时选择菜单不会关闭。

【讨论】：

此文件在我的项目中对我不可用，但我仍然收到此错误。如何解决这个问题。使用 jquery.mobile-1.4.2.js , jquery 2.1.0

【解决方案4】：

如果您想通过 ID 为每个项目设置最大高度。使用：

#select1-menu { max-height: 150px !important; }
#select2-menu { max-height: 200px !important; }

例如，您的选择菜单的 id 是 'select' 使用：

#select-menu { max-height: 150px !important; }

【讨论】：

【解决方案5】：

<!--JQUERY-->
$('.custom-combobox-toggle').on('click',function (e) {
      e.preventDefault();
      $('.ui-menu').addClass('custom-scroll');
});

<!--CSS-->
.ui-widget.ui-widget-content.custom-scroll {
    max-height: 300px;
    overflow: auto;
    display: block;
}

【讨论】：