更改第一個下拉菜單中的項時，下拉列表未在“模式對話框”中填充

Question

單擊jQuery數據表行中的“編輯”鏈接時，我正在打開Bootstrap模態對話框。 使用行中某一列的“ id”，使用ajax調用填充模態控件，以使用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);
        });
}

Answer 1

這個版本的populateMPOOEdit函數對我有用。 正如我在問題中提到的，模式對話框除了一些文本框外還有兩個下拉列表。 第二個下拉菜單的內容取決於選擇的第一個值。 因此，在填充控件時，我需要設置first下拉列表的選定值，然后進行第二次ajax調用，以基於first的選定值獲取第二個下拉列表的內容，並設置其選定的值。

解決方案是在“ when”時使用jQuery（請參閱jQuery API文檔 ）。

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

因此，如果您必須使用N個Ajax調用，它將看起來像：

$.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);
        })
});