jQuery ui selectmenu полоса прокрутки не работает

Я использую jQuery плагин selectmenu. Я инициализировал select с помощью 

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

У меня есть много вариантов, и это приводит к появлению полосы прокрутки браузера по умолчанию, но я не могу ее использовать. Если я нажму и попытаюсь перетащить эту панель, selectmenu закроется. Я могу прокручивать колесиком мыши. В css и различных плагинах может быть конфликт. Но я не знаю, с чего начать.

любые идеи, что может быть причиной этой проблемы?

9
javascript jquery jquery-plugins jquery-ui select-menu

4 ответов

Кажется, это проблема в этом разделе файла 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 не будет закрыт при нажатии из него, но он будет закрыт при выборе любой опции...

EDIT:

хорошо, теперь он работает. Измените раздел, показанный ранее этим один:

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

таким образом, поскольку полоса прокрутки является частью div с классом "ui-selectmenu-menu-dropdown"... selectmenu не будет закрыт при перемещении полосы прокрутки.

1

вы можете установить максимальную высоту для содержимого selectmenu, когда он открывается в CSS, а затем он представит полосу прокрутки в списке элементов, которые могут быть использованы.

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

возможно, Вам потребуется дополнительно ограничить это изменение стиля в CSS, если вы используете другие виджеты jQuery UI, которые включают элемент

    с назначенным классом 'ui-menu'.
13

решение приведено для примера "выбрать число" из демо-страница JQueryUI:

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

Если вы хотите задать максимальную высоту для каждого элемента по ID. Использовать:

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

например, идентификатор вашего selectmenu - "select" use:

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