'refresh' jquery UI selectmenu after update

Question

I have an get request which fetches a bunch of category information to populate a <select>. I'm using jQuery UI Selectmenu to style my select.

So my jQuery looks a little like this:

//Initalise the selectmenu
$("select").selectmenu({ style: 'dropdown' });

$.get("http://localhost/somedata?cat=2", function (data) {
    $.each(data, function (index, itemData) {
        $("<option value='" + itemData.Id + "'>" + itemData.Name + "</option>").appendTo("#selectList");
    });
});

However this populates the <select> but does not update the jQuery UI selectmenu. Any ideas what I need to do to get the selectmenu to be 're-drawn' so the new values appear in the selectmenu?

Answer 1

You can use the aptly-named refresh method, documented in the development wiki:

$("select").selectmenu({ style: 'dropdown' });

$.get("http://localhost/somedata?cat=2", function(data) {
    $.each(data, function(index, itemData) {
        $("<option value='" + itemData.Id + "'>" + itemData.Name
            + "</option>").appendTo("#selectList");
    });

    $("select").selectmenu("refresh");
});

Update: Unfortunately, the refresh function is documented but does not seem to be implemented yet. Another option is to destroy the widget and recreate it:

$("select").selectmenu("destroy").selectmenu({ style: "dropdown" });

Answer 2

That's a very old question so currently there is a much simpler solution available:

$("select").selectmenu("refresh");