javascript - jQuery UI 菜单获取/设置事件的 ui-menu-item

Question

我需要使用 jQuery UI Menu 做一个多下拉菜单.在此之前我们使用 jQuery UI Selectmenu为此目的。

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

Fiddle