JQueryUI selectmenu - remove all options

Question

I have no problem populating a jquery-ui from a restful web-service.

// get data from web-service
var subjectResponse = data.SiteSubjectResponse;

// The jquery-UI selectmenu
var $subjectOptions = $('#subjectOptions');

for(var i = 0; i < subjectResponse.length; i++)
{
    // Build the Option
    var $option = $('<option/>');
    var subjectName = subjectResponse[i].name;
    var subjectId = subjectResponse[i].id;
    $option.text(subjectName).val(subjectId);
    $subjectOptions.append($option);
}
// set the default item to the first item                                    
$('#subjectOptions').val(subjectResponse[0].clinicalTrialSubjectId);

// refresh jquery-ui selectmenu
$('#subjectOptions').selectmenu('refresh', true);

The problem is that I want to remove any previous items that are in this selectmenu, so I know with standard jquery this used to work.

// clear all options first, if any are there, used to work
$('#subjectOptions').find('option').remove().end();

I saw this solution also listed on StackOverflow, but it also doesn't seem to work either.

$("#subjectOptions option").each(function(index, option) {
        $(option).remove();
 });
// refresh list after we have removed all options
$('#subjectOptions').selectmenu('refresh', true);

And if you try to do a refresh with no options in the selectmenu, then you get an error message, and from my Googling, it seems this is a bug with selectmenu which isn't part of the latest stable version yet.

So, I am looking for a clear cut, simple solution to remove all the options, and remove the selected item from a jquery-ui selectmenu. If anyone can refer me to a link or document, or provide an example, that would be great. I wouldn't be posting this question if I hadn't already looked at the JQuery UI Selectmenu documentation and scoured Google for a solution.

Thanks for any help!

The widget replaces most of the HTML. If you can't match for an option selector -- inspect your HTML after initialising the widget and see what other selector you can use — blgt

tjholmes66 tjholmes66 · Accepted Answer · 2015-02-05T20:11:14

Thanks for the help, but the real answer at this time is:

$('#myOptions').find('option').remove().end();
$('#myOptions').selectmenu('destroy').selectmenu({ style: 'dropdown' });

The first line does a find job of really removing the options from the select, but that does nothing to change the additional HTML generated by JQueryUI selectmenu.

There is also a very nasty bug with the latest version of JQuery UI (1.11.2) and I don't know when this will be introduced into the latest stable release. The bug is that 'refresh' will fail when there are no [li] options in the selectmenu dropdown options. http://bugs.jqueryui.com/ticket/10662

The JQueryUI team, or someone reporting a bug should also post a work-around so folks won't have to worry about the next fix. The workaround is exactly is as I have it:

$('#myOptions').selectmenu('destroy').selectmenu({ style: 'dropdown' });

This will destroy the select, and re-create it, this solves the problem.

Maybe the JQueryUI team should consider:

$('#myOptions').selectmenu('clear');

to both remove the existing options from the [li] and then refresh the selectmenu for us. That would be real nice.

I hope this helps someone else.

JQueryUI selectmenu - remove all options

1 Answers