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
1 answers
solution1
3 2016-12-18 16: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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.