Bootstrap 多选下拉菜单 .val() 未更新

Question

我有 3 个级联的下拉菜单。 区域 --> 地区 --> 领土

我正在使用 Bootstrap 多选下拉菜单。

当我选择区域下拉列表时，将绑定各个区域 同时新绑定区域的领土将绑定到领土下拉列表。

这是我的下拉初始化代码。

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

            }

这是上述函数的代码。

function FillRegionsDropdown()
    {


        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');

                }


        });

    }
}

上述代码完美运行，即在区域下拉列表中更改区域绑定并设置为全选。

但问题在于绑定区域下拉与区域下拉更改。

这里是区域下拉绑定的代码。

 function FillTerritoriesDropdown()
    {

        var rgns=$('#ddlRegion').val();
        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');

            }


            });

    }
    }

这里的$('#ddlRegion').val() 没有更新到新绑定的区域值，这是由于区域下拉更改引起的。

$('#ddlRegion').val() 仍然包含初始页面加载区域值。

我已经被这个困扰了 6 个多小时了。

有人可以帮我解决这个问题吗？

Answer 1

尝试在 FillTerritoriesDropdown() 和 FillREgionsDropdown() 函数中使用 async:false。即在这两个函数的控制器的 ajaxcalls 中。