How to use jquery-ui selectmenu extension methods(

Question

The JQuery-UI selectmenu widget has some extension methods that can be used to customize rendering/styling of the dropdown select menu. From the api docs , the following widget extension methods can be used to customize the menu: - _renderItem( ul, item ) - _renderMenu( ul, items )

What i want to achieve is, overriding the above extension methods for just one instance of the selectmenu widget, and not at a global level. The widget factory docs does have example about extending a particular instance of a widget(example is at the bottom of this page), but haven't had any success in applying that to the selectmenu extension methods. Any insight for this issue is much appreciated.

Answer 1

Rather than use .data('ui-selectmenu') to gain access to the object (as suggested in the answer by @kashif_shamaz), the API provides the instance() method to expose the object. The benefit is that this method is part of the API, and thus should be more stable and better-documented during potential future changes, compared to string-based access via the data() method.

Use as follows:

$('#select-menu-id').selectmenu('instance')._renderItem = function(event, ui) {
    // override with custom logic for rendering each select option
}

Answer 2

Ah, found the way to use the extension methods. Here is an example:

$('select-menu-id').selectmenu(options).data("ui-selectmenu")._renderItem = function(event, ui) {
  // override with custom logic for rendering each select option
}

Used the way autocomplete widget was customized by @Ben Olson in this article: Customize the jQuery UI AutoComplete Drop Down Select Menu