jQuery UI菜單獲取/設置爲活動ui-menu-item

Question

我需要使用jQuery UI Menu做一個多下拉菜單。在此之前，我們使用jQuery UI Selectmenu來達到此目的。

Selectmenu基於select，其中可以使用val()方法獲取/設置選擇值。現在菜單基於ul/li，所以我沒有這個選項。

所以我需要效仿莫名其妙以下behahior：

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