jquery ui selectmenu滚动条不起作用

时间:2012-07-16 09:01:16

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

我使用jquery selectmenu插件。我用

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

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

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

5 个答案:

答案 0 :(得分:13)

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

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

如果您正在使用包含< ul>的其他jQuery UI小部件,则可能需要进一步限制CSS中的样式更改。课程元素' ui-menu'分配

答案 1 :(得分:2)

为示例提供了解决方案"选择一个数字" JQueryUI demo page

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

答案 2 :(得分:1)

这似乎是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”子句中的条件,因此selectmenu已关闭......

您可以在“if”子句中注释该行,直到有人为此错误提供解决方案。这样,当你点击它时,selectmenu不会被关闭,但当你选择任何选项时它将被关闭...

编辑:

好的,它现在正在运作。更改之前显示的部分:

$( 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的一部分...移动滚动条时不会关闭selectmenu。

答案 3 :(得分:0)

如果您想按ID设置每个项目的最大高度。使用:

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

例如,您的selectmenu的id是'select'使用:

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

答案 4 :(得分:0)

<!--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;
}