当第一个下拉列表中的项目发生更改时，下拉列表不会填充在“modal dialog”中
当单击jQuery数据表行中的“编辑”链接时，我打开一个Bootstrap模式对话框。 使用行中其中一列的“id”，使用ajax调用填充模式中的控件，以使用c＃web服务从数据库中获取数据。
此模式中包含两个下拉列表，其中第二个内容通过选择第一个项目来确定。 当我填充第一个下拉列表并设置其选定值时，我可以看到第一个下拉列表的onchange（）触发。 我还可以看到第二个下拉列表已正确填充。 但似乎设置第二次下拉的选定值没有任何影响。 我不确定我错过了什么。
这是我有的：
... header stuff .... // 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: '', 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: '', cache: false, data: JSON.stringify({ "AreaID": areaID }), }).done(function (result) {debugger $("#ddlDistrict").empty().append($("").val("-1").html("Select District")); jResult = JSON.parse(result.d); $.each(jResult, function (val, txt) { $("#ddlDistrict").append($("").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函数对我有用。 正如我在问题中提到的，除了一些文本框之外，modal dialog还有两个下拉列表。 第二次下拉的内容取决于第一次选择的值。 因此，在填充控件时，我需要设置第一个下拉列表的选定值，然后根据第一个选定值进行第二个ajax调用以获取第二个下拉内容，并设置其选定值。
解决方案是使用jQuery“when”（参见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($("").val("-1").html("Select District")); jResult = JSON.parse(a2[0].d); $.each(jResult, function (val, txt) { $("#ddlDistrict").append($("").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); }) });
Interesting Posts