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
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 therefreshoption, like this: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,$secondSelectand so on.