I use erichynds's jquery MultiSelect Plugin to changed to 2-level chained-select-box, however it works perfectly, but there is a little flaw that have to fix so far.
Please look for working example here.
For instance, I picked option '2' on first box, second box would populated optgroup for '2' as well, then I picked '2B' and the text is in second box. OK now I deselect '2' on first box, the optgroup for '2' is gone, BUT the text is still show in second box, how can I remove together with the text when I deselect the relevant option on first box?
function filterActivityTrigger(e){
var ids = $('#filterActivity + div input:checked').map(function(i) {
return $(this).val().replace(/ .*/, '');
}).get(); // Retrieve checked IDs
$('#filterSubActivity + div div label').each(function() { // Show matching options
$(this).toggle($.inArray($('input', this).val().replace(/(\d+).*/, '$1'), ids) > -1);
});
$('#filterSubActivity + div label.optGroup').each(function() { // Show matching groups
$(this).toggle($(this).next().find('label:visible').length > 0);
});
}
Please advise, thanks.