jQuery MultiSelect issue with two dropdowns

Question

I am using this multiselect plugin with 2 dropdowns with these ids: #Countries & #Cities.

When the page loads, both dropdowns are populated with data and every option is checked:

$('#Countries').multiselect('checkAll');
$('#Cities').multiselect('checkAll');

When I click the 'check all' link after clicking 'uncheck all' in the #Countries dropdown, I want:

1. all checkboxes in #Countries dropdown to be checked - this works by default
2. all checkboxes in #Cities dropdown to be checked - this doesn't work

I tried this in JavaScript:

$('#Countries').multiselect({
    checkall: function(event, ui){
        $('#Cities').multiselect('checkAll');
        $('#Cities').multiselect('refresh');
    }
});

What am i missing?

Answer 1

Try this,

JsFiddle

$("#City").multiselect();
$("#Country").multiselect({
        header: true,
    checkAll: function(){
       $("#City").multiselect("widget").find('.ui-multiselect-all').click()
   },
   uncheckAll: function(){
     $("#City").multiselect("widget").find('.ui-multiselect-none').click()
   },
    });

$("#Country").multiselect("widget").find('.ui-multiselect-all').click()
$("#City").multiselect("widget").find('.ui-multiselect-all').click()