How to remove the options from a Selectmenu?

Question

I have three selectmenu objects in a div. The first loads with the page. When I select something in the first, that value is used to populate the second.. selecting in the second populates the third.

Before I put new bits into a field I need to empty the old.

Doesn't seem to be working - so I'm doing something foolish it seems. No error messages.. just no emptying.

firstSelect = $("#first");

$.ajax({
    populate 'first'
});

secondSelect = $("#second");

firstSelect.selectmenu({
    change: function( event, data ) {
        secondSelect.empty();
        getSeconds(data.item.value);
    }
}).selectmenu("menuWidget").addClass('overflow');

thirdSelect = $("third");
secondSelect.selectmenu({
    change: function( event, data ) {
        thirdSelect.empty();
        getThirds(data.item.value);
    }
}).selectmenu( "menuWidget" ).addClass('overflow');

<body>
    <div>
        <select id='first'></select>
        <select id='second'></select>
        <select id='third'></select>
    </div>
</body>

I've also tried $("#selectId").html("");

Edit:

Tried using $("#selectid").selectmenu("refresh") and $("#selectid").empty().selectmenu("refresh") - both give me this error when I try to open the list (clicking on it):

jquery-ui.min.js:11 Uncaught TypeError: Cannot read property 'index' of undefined at HTMLUListElement.focus (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:11:25160) at t.(anonymous function).(anonymous function)._trigger (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:11090) at t.(anonymous function).(anonymous function).focus (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:7:27841) at t.(anonymous function).(anonymous function).focus (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:4499) at t.(anonymous function).(anonymous function).open (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:11:26239) at t.(anonymous function).(anonymous function).open (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:4499) at t.(anonymous function).(anonymous function)._toggle (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:11:28018) at t.(anonymous function).(anonymous function)._toggle (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:4499) at t.(anonymous function).(anonymous function).click (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:11:28578) at HTMLSpanElement.r (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:9786) focus @ jquery-ui.min.js:11 _trigger @ jquery-ui.min.js:6 focus @ jquery-ui.min.js:7 (anonymous) @ jquery-ui.min.js:6 open @ jquery-ui.min.js:11 (anonymous) @ jquery-ui.min.js:6 _toggle @ jquery-ui.min.js:11 (anonymous) @ jquery-ui.min.js:6 click @ jquery-ui.min.js:11 r @ jquery-ui.min.js:6 dispatch @ jquery.min.js:3 q.handle @ jquery.min.js:3

could you add what happened when you tried to use .html()? — mathmaniac88

Rory McCrossan Rory McCrossan · Accepted Answer · 2016-12-18T16:26:00

When you call empty() it removes the <option> elements from the underlying <select> element, but does not update the selectmenu plugin automatically. You need to do that manually by using the refresh option, like this:

secondSelect.empty().selectmenu('refresh');

I'd also suggest you stick to jQuery naming standards and place a $ character at the start of variables which hold jQuery objects, eg. $firstSelect, $secondSelect and so on.

How to remove the options from a Selectmenu?

Edit:

1 Answers