Bootstrap multiselect Dropdown change event on cascading dropdowns

Question

Can someone help me in binding 2 dropdowns when an onChange/onSelectAll/onDropDownHide event is raised on the 3rd dropdown.

Below is my scenario:

I have 3 multi select dropdowns(Bootstrap multiselect). They are cascading drop downs

(i.e. zone --> region --> territory). When i change zone drop down i the related regions are to be bound and all the regions are by default set to select.

So in this scenario the territories related to the regions already selected by zone selection are also to be bound.

I have used onChange,onSelectAll and also onDropdownHidden events.

But the selected values of the regions dropdown doesn't change untill and unless the regions dropdown is droppeddown and again close.

Here is my code for setting up the dropdowns on doc.ready()

$('#ddlZone').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            enableFiltering: true,
            includeSelectAllOption: true,
            nonSelectedText: 'Select Zone',
            enableCaseInsensitiveFiltering: true,
            selectAllNumber: true,
            onChange: function(option, checked,select) {
                FillRegionsDropdown($('#ddlZone').val());
            },
            onSelectAll: function(){
                FillRegionsDropdown($('#ddlZone').val());
            },
            onDeselectAll:function(){
                FillRegionsDropdown($('#ddlZone').val());
            },
            onDropdownHidden: function(event) {
                FillRegionsDropdown($('#ddlZone').val());
            }

        });

        //Default Select All
        $("#ddlZone").multiselect('selectAll', false);
        $("#ddlZone").multiselect('updateButtonText');

        $('#ddlRegion').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            enableFiltering: true,
            includeSelectAllOption: true,
            nonSelectedText: 'Select Region',
            enableCaseInsensitiveFiltering: true,
            selectAllNumber: true,
            maxHeight: 200,
            onChange: function(option, checked,select) {
                FillTerritoriesDropdown($('#ddlRegion').val());
            },
            onSelectAll: function(){
                FillTerritoriesDropdown($('#ddlRegion').val());
            },
            onDeselectAll:function(){
                FillTerritoriesDropdown($('#ddlRegion').val());
            },
            onDropdownHidden: function(event) {
                FillTerritoriesDropdown($('#ddlRegion').val());
            }

        });

        //Default Select All
        $("#ddlRegion").multiselect('selectAll', false);
        $("#ddlRegion").multiselect('updateButtonText');

        $('#ddlTerritory').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            enableFiltering: true,
            includeSelectAllOption: true,
            nonSelectedText: 'Select Territory',
            enableCaseInsensitiveFiltering: true,
            selectAllNumber: true,
            maxHeight: 200
});

Here are my functions for the respective events

function FillTerritoriesDropdown(RegionIds)
    {

        var rgns=RegionIds;
        if(rgns != null)
        {
            rgns= rgns.join(",");
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "@Url.Action("BindTerritoriesOnRegionsAjax", "GeoMap")",
                data: "{RegionIds:'" + rgns + "'}",

            success: function (Result)
            {


                $("#ddlTerritory").html("");

                $('#ddlTerritory').multiselect( 'refresh' );
                $.each(Result, function (key, value) {
                    $("#ddlTerritory").append($("<option></option>").val(value.Value).html(value.Text));
                });
                $('#ddlTerritory').multiselect( 'rebuild' );
                $("#ddlTerritory").multiselect('selectAll', false);
                $("#ddlTerritory").multiselect('updateButtonText');

            }


            });
            FillMarketsDropdown($('#ddlTerritory').val());
            FillFOsDropdown($('#ddlTerritory').val());
    }
    }

    function FillRegionsDropdown(ZoneId)
    {

        var Zone=$('#ddlZone').val();
        if(Zone != null)
        {
            Zone= Zone.join(",");
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "@Url.Action("BindRegionsOnZonesAjax", "GeoMap")",
                data: "{ZoneIds:'" + Zone + "'}",

                success: function (Result)
                {


                    $("#ddlRegion").html("");

                    $('#ddlRegion').multiselect( 'refresh' );
                    $.each(Result, function (key, value) {
                        $("#ddlRegion").append($("<option></option>").val(value.Value).html(value.Text));
                    });
                    $('#ddlRegion').multiselect( 'rebuild' );
                    $("#ddlRegion").multiselect('selectAll', false);
                    $("#ddlRegion").multiselect('updateButtonText');

                }


            });
            FillTerritoriesDropdown($('#ddlRegion').val());
            FillMarketsDropdown($('#ddlTerritory').val());
            FillFOsDropdown($('#ddlTerritory').val());
        }
    }