Bootstrap multiselect下拉列表.val()不更新

问题描述:

我有3个下降级联。
区域 - >区域 - >区域

I have 3 drop downs which are cascading. Zone -- > Region --> Territory

我正在使用Bootstrap多选下拉。

I am using Bootstrap multiselect drop downs.

当我选择区域下拉时,各个区域将绑定
,同时新绑定区域的区域将绑定到区域下拉。

When i select the Zone drop down the respective regions are to be bound and simultaneously the newly bound regions' territories are to be bound to the territory drop down.

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

Here is my drop-down initialisation code.

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

            }

以下是上述功能的代码。

Here is the code for the above functions.

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

                }


        });

    }
}

以上代码完美无缺,即在区域下拉列表中更改区域绑定并设置为全部选择。

The above code works perfectly i.e. on Zone dropdowns change the regions get bound and set to select all.

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

But the issue is with Binding territory drop down with zone drop down change.

以下是Territory下拉列表绑定的代码。

And here is the code for Territory dropdowns binding.

 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()未更新为由于区域下拉更改而导致的新绑定区域值。

Here the $('#ddlRegion').val() doesn't get updated to the newly bound region values which is caused due to zone drop down change.

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

$('#ddlRegion').val() still contains the initial page load region values.

我已经被这个打了六个多小时了。

I have been struck with this for more than 6 hours now.

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

Can some one help me to fix this issue?,

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

Try using async:false in both FillTerritoriesDropdown() and FillREgionsDropdown() functions. i.e. in the ajaxcalls to the controller of those 2 functions.