Javascript 更改第一个下拉列表中的项时，下拉列表未在模式对话框中填充

单击jQuery数据表行中的“编辑”链接时，我正在打开一个引导模式对话框。使用行中某一列的“id”，使用ajax调用填充modal中的控件，以使用c#web服务从数据库获取数据

此模式包括两个下拉列表，其中第二个的内容由从第一个中选择的项目确定。当我填充第一个下拉列表并设置其所选值时，我可以看到第一个下拉列表的onchange（）会触发。我还可以看到第二个下拉列表已正确填充。但设置第二个下拉菜单的选定值似乎没有效果。我不确定我错过了什么

以下是我所拥有的：

<div class="modal fade" id="editModal" role="dialog" aria-labelledby="editLabel" aria-hidden="true">
    <div class="modal-dialog fade in ui-draggable">
        <div class="modal-content">
            ... header stuff
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-3">
                        ....
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="ddlArea">Area</label>
                            <asp:DropDownList runat="server"
                                ID="ddlArea"
                                ClientIDMode="Static"
                                CssClass="form-control"
                                DataTextField="AreaName"
                                DataValueField="AreaID"
                                AppendDataBoundItems="true">
                                <asp:ListItem Text="Select Area" Value="-1" />
                            </asp:DropDownList>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group">
                            <label for="ddlDistrict">District</label>
                            <asp:DropDownList runat="server"
                                ID="ddlDistrict"
                                Enabled="false"
                                ClientIDMode="Static"
                                CssClass="form-control"
                                DataTextField="DistrictName"
                                DataValueField="DistrictID"
                                AppendDataBoundItems="true">
                                <asp:ListItem Text="Select District" Value="-1" />
                            </asp:DropDownList>
                        </div>
                    </div>
                </div>

// When "Edit" link on a table row is clicked
function showEdit(MPOOID) {
    $('#hfMPOOID').val(MPOOID);
    $('#editModal').modal('show');    
}

$(document).ready(function () {
    $('#editModal').modal({
        keyboard: true,
        backdrop: "static",
        show: false
    }).on('show.bs.modal', function (e) {
        var mpooID = $('#hfMPOOID').val();
        //make ajax call to populate controls
        populateMPOOEdit(mpooID);
    });
});

function populateMPOOEdit(mpooID) {
    var AreaID;
    var DistrictID;
    // Fist ajax call to populate controls, including Area drop down list and set its selected value
    $.when(
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: '<%= ResolveUrl("services/mpoo.asmx/GetMPOOListByMPOOID") %>',
            cache: false,
            data: JSON.stringify({ "MPOOID": mpooID }),
        }).done(function (result) {
            jResult = JSON.parse(result.d);
            $.each(jResult, function (val, txt) {debugger
                $('#tbMgrFN').val(txt.ManagerFirstName);
                ...
                AreaID = txt.AreaID;
                DistrictID = txt.DistrictID;
                $("#ddlArea")[0].selectedIndex = 0;
                $("#ddlDistrict")[0].selectedIndex = 0;
                $("#ddlArea").val(AreaID);
                $("#ddlDistrict").prop("disabled", false);
                $('#ddlArea').change();
        }).fail(function (jqXHR, textStatus, errorThrown) {
            var errMsg = textStatus + ' - ' + errorThrown + '... Status: ' + jqXHR.status + ",  ResponseText: " + jqXHR.responseText;
        }),
        // second ajax call, populate second drop down based on selected value of first drop down
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: '<%= ResolveUrl("services/mpoo.asmx/GetDistrictsByAreaID") %>',
            cache: false,
            data: JSON.stringify({ "AreaID": areaID }),
        }).done(function (result) {debugger
            $("#ddlDistrict").empty().append($("<option></option>").val("-1").html("Select District"));
            jResult = JSON.parse(result.d);
            $.each(jResult, function (val, txt) {
                $("#ddlDistrict").append($("<option></option>").val(null == txt.DistrictID ? '-1' : txt.DistrictID).html(txt.DistrictName));
            });
        }).fail(function (jqXHR, textStatus, errorThrown) {
            var errMsg = textStatus + ' - ' + errorThrown + '... Status: ' + jqXHR.status + ",  ResponseText: " + jqXHR.responseText;
        })).done(function (a1, a2) {
                // Set selected value of seond drop down -- does not work
                $("#ddlDistrict").val(DistrictID);
        });
}

... 标题材料
....
地区
地区
//单击表格行上的“编辑”链接时
函数showEdit（MPOID）{
$（'hfMPOOID'）.val（MPOOID）；
$（'editModal'）.modal（'show'）；
}
$（文档）.ready（函数（）{
$（'#editmodel'）.model({
键盘：没错，
背景：“静态”，
节目：假
}).on（'show.bs.modal'，函数（e）{
var mpooID=$（'#hfMPOOID'）.val（）；
//进行ajax调用以填充控件
populateMPOOEdit（mpooID）；
});
});
函数populateMPOOEdit（mpooID）{
面状变种；
区性变异；
//第一次ajax调用以填充控件，包括区域下拉列表并设置其选定值
美元。什么时候(
$.ajax({
类型：“POST”，
数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
url:“”，
cache:false，
数据：JSON.stringify（{“mpood”：mpood}），
}).完成（功能（结果）{
jResult=JSON.parse（result.d）；
$.each（jResult，函数（val，txt）{debugger
$（'#tbMgrFN'）.val（txt.ManagerFirstName）；
...
AreaID=txt.AreaID；
DistrictID=txt.DistrictID；
$（“#ddlArea”）[0]。选择的索引=0；
$（“#地区”）[0]。选择的索引=0；
$（“#ddlArea”）.val（AreaID）；
$（“#ddlddistrict”）.prop（“disabled”，false）；
$（'#ddlArea'）.change（）；
}).fail（函数（jqXHR、textStatus、errorshown）{
var errMsg=textStatus+'-'+errorshown+'…状态：'+jqXHR.Status+”，ResponseText:“+jqXHR.ResponseText；
}),
//第二个ajax调用，根据第一个下拉列表的选定值填充第二个下拉列表
$.ajax({
类型：“POST”，
数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
url:“”，
cache:false，
数据：JSON.stringify（{“AreaID”：AreaID}），
}).done（函数（结果）{debugger
$（“#ddlddistrict”）.empty（）.append（$（“”）.val（“-1”）.html（“选择地区”）；
jResult=JSON.parse（result.d）；
$.each（jResult，函数（val，txt）{
$（“#ddlddistrict”）.append（$（“”）.val（null==txt.DistrictID？'-1）：txt.DistrictID.html（txt.DistrictName））；
});
}).fail（函数（jqXHR、textStatus、errorshown）{
var errMsg=textStatus+'-'+errorshown+'…状态：'+jqXHR.Status+”，ResponseText:“+jqXHR.ResponseText；
})).完成（功能（a1、a2）{
//设置seond下拉列表的选定值--不起作用
$（“#地区”）.val（地区ID）；
});
}

这个版本的PopulatePooEdit函数对我来说很有用。正如我在问题中提到的，除了一些文本框外，模态对话框还有两个下拉列表。第二个下拉列表的内容取决于第一个下拉列表的选定值。因此，在填充控件时，我需要设置第一个下拉列表的选定值，然后进行s第二个ajax调用获取第二个下拉列表的内容，基于第一个下拉列表的选定值，并设置其选定值

解决方案是使用jQuery“when”（参见）

---

当我跟踪js代码时，似乎在“populateMPOOEdit（）”函数中，“done”部分首先被执行，然后进入第二个下拉列表的onchange（）在什么时候设置所选值已经太晚了。有什么办法解决这个问题吗？我更新了问题和上面的函数，添加了一个布尔变量来检查值是否存在于第二个下拉列表中，并且始终为false。任何jQuery专家都可以看到我在这里做错了什么。我只做了最后几根头发！我做了一些修改重新研究并认为我可以在组合两个ajax调用时使用jQuery$：一个用于填充常规控件（文本框，第一个下拉列表（ddlArea））并在第二次ajax调用中使用区域下拉列表的选定值来填充区域下拉列表。我当时认为我应该能够设置区域下拉列表的选定值，但仍然不走运。这是正确的方法吗？我基于此更新了问题。

function populateMPOOEdit(mpooID) {
    var AreaID;
    var DistrictID;
    $.when(
        // First ajax call to get set selected value of drop down 1
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: '<%= ResolveUrl("services/mpoo.asmx/GetMPOOListByMPOOID") %>',
            cache: false,
            data: JSON.stringify({ "MPOOID": mpooID }),
        }),
        // Second ajax call to get the content of second drop down
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: '<%= ResolveUrl("services/mpoo.asmx/GetDistrictsByAreaID") %>',
            cache: false,
            data: JSON.stringify({ "AreaID": areaID }),
        })).done(function (a1, a2) {
                // Now, set the values of each control
                jResult = JSON.parse(a1[0].d);
                $.each(jResult, function (val, txt) {
                    $('#tbMgrFN').val(txt.ManagerFirstName);
                    ....
                    AreaID = txt.AreaID;
                    DistrictID = txt.DistrictID;
                    $("#ddlArea")[0].selectedIndex = 0;
                    $("#ddlDistrict")[0].selectedIndex = 0;
                    $("#ddlArea").val(AreaID);
                    $("#ddlDistrict").prop("disabled", false);
                });
                // Populate second drop down
                $("#ddlDistrict").empty().append($("<option></option>").val("-1").html("Select District"));
                jResult = JSON.parse(a2[0].d);
                $.each(jResult, function (val, txt) {
                    $("#ddlDistrict").append($("<option></option>").val(null == txt.DistrictID ? '-1' : txt.DistrictID).html(txt.DistrictName));
                });
                // Set second drop down's selected value
                $("#ddlDistrict").val(DistrictID);
        });
}

$.when(
    $.ajax({
        ....
    }),
    $.ajax({
        ....
    }),
    ....
    $.ajax({
        ....
    }).done(function (a1, a2, ..., aN) {
        var data1 = JSON.parse(a1[0].d);
        var data2 = JSON.parse(a2[0].d);
        ....
        var dataN = JSON.parse(aN[0].d);
        })
});