Search code examples
jqueryjquery-uijquery-ui-selectmenu

Override jQuery's selectmenu

When I select an item on a selectmenu, I want to append some text to the selected option.

I don't want to change the option's text, just the text that is displayed in the .ui-selectmenu-text element.

For example, if the options are

Option A
Option B
Option C

If I choose the second one, I want the select menu to show Option B ("some text")

I tried using something like

$.widget("ui.selectmenu", $.ui.selectmenu,
{
    TEST: function()
    {
        console.log("just to check if this happens");
    },
});

where the TEST part is, I've tried _select, _setOption and so on...

Solution

  • I was close! This is how I've done it

    $.widget("ui.selectmenu", $.ui.selectmenu,
{
    _select: function(event, ui)
    {
        this._super(event, ui);

        this.buttonText.text(this.buttonText.text() + "(some text)");
    },
});