javascript - Bootstrap 多选下拉菜单 .val() 不更新

Question

我有 3 个层叠的下拉菜单。地区-->地区-->领地

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

当我选择 Zone 下拉列表时，各个区域将被绑定(bind)同时新绑定(bind)区域的领地绑定(bind)到领地下拉。

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

$('#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');

                }


        });

    }
}

上面的代码完美运行，即在区域下拉菜单中更改区域绑定(bind)并设置为全选。

但问题在于绑定(bind)区域随区域下拉变化而下降。

这里是 Territory 下拉列表绑定(bind)的代码。

 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() 没有更新到新绑定(bind)的区域值，这是由于区域下拉变化引起的。

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

我已经为此震惊了 6 个多小时。

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

Answer 1

尝试在 FillTerritoriesDropdown() 和 FillREgionsDropdown() 函数中使用 async:false。即在对这两个函数的 Controller 的 ajax 调用中。