当点击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);
});
}
答案 0 :(得分：0)
这个版本的populateMPOOEdit函数对我有用。正如我在问题中提到的，除了一些文本框之外，模态对话框还有两个下拉列表。第二次下拉的内容取决于第一次选择的值。因此，在填充控件时，我需要设置第一个下拉列表的选定值，然后根据所选的第一个值进行第二个ajax调用以获取第二个下拉内容，并设置其选定值。
解决方案是使用jQuery＆＃34;当＆＃34; （见jQuery API documentation）。
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);
})
});