JQuery UI Menu получить / установить для активного элемента UI-меню

Question

Мне нужно сделать несколько выпадающих меню, используя JQuery UI Menu. До этого мы использовали jQuery UI Selectmenu для этих целей.

Выбор был основан на selectгде можно использовать val() метод получения / установки выбранного значения. Теперь меню основано на ul/li, и поэтому у меня нет такой опции.

Поэтому мне нужно как-то эмулировать следующее поведение:

someMenu.menu();
//....                
someMenu.val(someValue);
someMenu.menu("refresh");

Я попытался расширить виджет меню и добавить несколько методов, таких как:

 $.widget("market.multiDropdownMenu",$.ui.menu, {
    //....
    getSelectedItem: function () {
        return this.active;             
    },

    setSelectedItem: function(elem){
        var elem = this.element.find(elem).first();
        if (elem) {
            this.active = elem;
            this.focus('focus', elem);
            this.element.find('.ui-menu-item.selected').removeClass('selected');
            this.getSelectedItem().addClass('selected');  
        }
    },
    //....
}

И затем, используя это как:

// for getter
var elem = someMenu.multiDropdownMenu("getSelectedItem"); // getting null
// and for setter
var newElem = ...
someMenu.multiDropdownMenu("setSelectedItem", newElem);
someMenu.multiDropdownMenu("refresh");

Но после установки некоторого значения и попытки вернуть его в следующий раз active поле null,

Я также пытался использовать elem.trigger('click'); вместо этого сфокусируйте событие безуспешно.

Answer 1

Мне не совсем понятно, что вы хотите здесь сделать, но, возможно, вы могли бы установить класс для любого элемента в вашем меню. Затем, если вы хотите знать, какой из них выбран, вы просто используете этот класс.

Установить выбранное:

$( "#menu" ).menu({
    select: function(event, ui) {
        $('.selectedItem').removeClass('selectedItem');
        $(event.currentTarget).addClass('selectedItem');

    }
});

Получить выбранное значение:

$('.selectedItem').text();

скрипка