更改第一个下拉菜单中的项目时，下拉列表未填充在“模态对话框"中 [英] Drop down list not populating in Modal Dialog when item in first drop down is changed
问题描述
当单击jQuery数据表行中的编辑"链接时，我正在打开Bootstrap模态对话框.使用行中任一列中的"id"，使用ajax调用填充模态控件，以使用c#Web服务从数据库中获取数据.
I am opening a Bootstrap modal dialog when the "Edit" link in jQuery data table row is clicked. Using the "id" from one of the columns in the row, controls in modal are populated using ajax call to fetch the data from database using c# web service.
此模式中包含两个下拉列表，其中第二个的内容是通过从第一个中选择一项来确定的.当我填充第一个下拉菜单并设置其选定值时，我可以看到第一个下拉菜单的onchange()被触发.我还可以看到第二个下拉列表已正确填充.但是设置第二下拉菜单的选定值似乎没有效果.我不确定我缺少什么.
Included in this modal are two drop down lists, where the content of the second is determined by selection of an item from first. When I populate the first drop down and set its selected value, i can see that the first drop down's onchange() fires. I can also see the second drop down is populated correctly. But it seems setting the selected value of second drop down has no effect. I am not sure what i am missing.
这就是我所拥有的:
<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);
});
}
推荐答案
此版本的populateMPOOEdit函数对我有用.正如我在问题中提到的，模式对话框除了一些文本框外还有两个下拉列表.第二个下拉菜单的内容取决于第一个下拉菜单的选定值.因此，在填充控件时，我需要设置first下拉列表的选定值，然后进行第二次ajax调用，以基于first的选定值来获取second下拉列表的内容，并设置其选定的值.
This version of populateMPOOEdit function is what worked for me. As I mentioned in the question, the modal dialog, in addition to some text boxes has two drop down lists. The content of second drop down depends on selected value of first. So when populating the controls, I needed to set selected value of first drop down and then make a second ajax call to get content of second drop down, based on selected value of first, and set its selected value.
解决方案是使用jQuery何时"(请参阅 jQuery API文档).
The solution was to use jQuery "when" (see 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调用，它将看起来像这样:
So, if you have to use N ajax calls, it would look like:
$.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);
})
});
这篇关于更改第一个下拉菜单中的项目时，下拉列表未填充在“模态对话框"中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
