Bootstrap 多选下拉列表 .val() 未更新

Question

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

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

当我select Zone 下拉时要绑定各自的区域同时新绑定区域的领地绑定到领地下拉。

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

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

                }


        });

    }
}

以上代码完美运行，即在区域下拉菜单中更改区域绑定并设置为 select 全部。

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

这里是地区下拉菜单绑定的代码。

 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。即在对这两个函数的控制器的 ajax 调用中。

Bootstrap 多选下拉列表 .val() 未更新

Bootstrap multiselect dropdown .val() not updating

javascript

jquery

twitter-bootstrap

asp.net-mvc-4

bootstrap-multiselect