Question

我有一个ASP.NET MVC应用程序，其中一个页面有下拉列表来选择Country和State。此页面收集客户数据，包括地址。

我按照this教程设置了所有内容，以便在选择国家/地区时填充州值。

因此，当添加新客户填充国家/地区下拉列表，并且当您更改国家/地区的值时，我会让它正常工作，重新填写州下拉列表，并且在提交表单时，我获得StateID和模型中的CountryID。

我遇到的问题是编辑客户，当模型已经有StateID和CountryID时，我可以通过Country下拉菜单选择正确的值，但不能选择State下拉列表。

以下FillStates()方法用于在更改国家/地区值时填充州下拉列表。

function FillStates() {

   var countryID = $("#CountryID").val();

   $.ajax({
       url: '/Customers/GetStates',
       type: "GET",
       dataType: "JSON",
       data: { CountryID: countryID },
       success: function (states) {
           $("#StateID").html("");
           if (Object.keys(states).length > 0) {
               $("#StateID").append($('<option></option>').val(0).html('Select a State'));
           }
           else {
               $("#StateID").append($('<option></option>').val(0).html(''));
           }

           $.each(states, function (i, state) {
               $("#StateID").append(
                   $('<option></option>').val(state.StateID).html(state.Name));
               });
           }
    });
}

为了编辑客户，我需要在页面加载时填写状态下拉列表并从下拉列表中选择正确的值。

这里的javascript应该完全正确...

$(document).ready(function () {
    $.when(FillStates()).done(function (e) {
        $("#StateID").val('@Model.StateID');                
    });            
});

但是这不起作用 - 我已经调试了它并且（让我们假设模型有StateID = 8）当它遇到行$("#StateID").val('8');时该行执行没有错误但是不会更改下拉列表的选定值。

如果我要将该行移动到FillStates()方法的底部，它会正确地更改选择 - 但是每次更改Country时都会执行，而不是仅在页面加载时执行一次

为什么完全相同的代码行$("#StateID").val('8');在FillStates()方法内工作正常，但在FillStates()完成后执行时却无效？

Answer 1

它无法正常工作的原因是，即使在将选项加载到SELECT元素之前，[$when] 1中的代码也会被执行。如果你在两个地方放置了console.log（'something'），你就可以看到它。

$when期望传递给它的方法返回一个承诺。您的FillState方法未返回承诺。如果您更改FillStates方法以返回承诺，则您的代码将有效。

function FillStates() {
    var countryID = $("#CountryID").val();

    return $.ajax({
        // Other code goes here
    });
}

如果您不希望这样做，您只需将状态ID传递给FillStates函数并在那里设置所选值。

function FillStates(stateId) {

   var countryID = $("#CountryID").val();

   $.ajax({
          url: '/Post/GetStates',
          type: "GET",
          dataType: "JSON",
          data: { CountrId: countryID },
          success: function (states) {
             $("#StateID").html("");
             if (Object.keys(states).length > 0) {
                $("#StateID").append($('<option></option>').val(0).html('Select a State'));
             }
             else {
                    $("#StateID").append($('<option></option>').val(0).html(''));
             }

           $.each(states, function (i, state) {
            $("#StateID").append($('<option></option>').val(state.Value).html(state.Text));
           });
          if (stateId != null) {
               $("#StateID").val(stateId);
          }
        }
    });
 }

然后根据需要使用和不使用stateId值来调用它

FillStates(@Model.StateId); // call it for your edit on page load
FillStates();   // call it When user changes country

在这种情况下，您不需要$when。

Answer 2

您需要从jqXHR返回$.ajax()返回的FillStates()对象，或者在您的选择填充数据之前执行$("#StateID").val()。

function FillStates() {
  var countryID = $("#CountryID").val();
  return $.ajax({ ... });
}

在AJAX调用不起作用后设置下拉值

2 个答案: