级联下拉列表中的Bootstrap multiselect下拉更改事件

Question

当第3个下拉列表中出现onChange / onSelectAll / onDropDownHide事件时，有人可以帮我绑定2个下拉列表。

以下是我的情景：

我有3个多选下拉菜单（Bootstrap multiselect）。他们是级联下降

（即zone --> region --> territory）。 当我更改区域下拉时，相关区域将被绑定，并且默认情况下所有区域都设置为选择。

因此，在这种情况下，与区域选择已经选择的区域相关的区域也将被绑定。

我使用过onChange，onSelectAll以及onDropdownHidden事件。

但区域下拉列表的选定值不会发生变化，除非区域下拉列表被下拉并再次关闭。

以下是我在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
});

以下是我各自活动的功能

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());
        }
    }