基于值json请求的加载列表

Question

我在做这件事时遇到了一个小问题。目前，我有一个脚本，它可以在页面加载时加载状态列表。很好，它与县列表级联，因此每当状态更改时，它都会向服务器发送一个ajax调用，然后根据状态将县列表项从下拉列表中获取。现在，我想在保持相同功能的同时做一些稍微不同的事情。我想让州和县只需点击#load。因此，一旦我点击load，它将向服务器发送一个ajax调用，并获得一个与该负载调用相关联的州和县名称。但是这里有个问题，我可以将状态值改为状态，但它根本不改变县列表。县列表完全为空，因此我必须打开statelist并单击statelist来加载县列表。我试着使用加载，点击，更改等。但是不管用，所以我想知道你能不能帮我。我在这里说的够多了，这是些密码。

$(document).ready(function () {
    var $stateList = $("#StateList");

    $stateList.change(function () {

        var statelist = $stateList[0];
        var countylist = $("#CountyList");
        $.ajax({
            type: "GET",
            cache: false,
            url: "GetCounties",
            data: { "jsonString": statelist[statelist.selectedIndex].value },
            success: function (data)
            {
                countylist.html(data);
            },
        });
    });
        $("#Load").click(function () {
var orderdetailid = document.getElementById("LoadOrderDetailID");

    var statelist = $("#StateList");
        $.ajax({
            type: "GET",
            cache: false,
            url: "GetState",
            data: { "jsonOrderInt": orderdetailid.value },
            success: function (data) {
                {
                    statelist.val(data)
                }
            }
        });
        var orderdetailid = document.getElementById("LoadOrderDetailID");
        var countyname = $("#CountyList");
        $.ajax({
            type: "GET",
            cache: false,
            url: "GetCountyName",
            data: { "jsonOrderInt": orderdetailid.value },
            success: function (data) {
                {
                    countyname.val(data)
                }
            }
        });

这是一张照片：http://imgur.com/6RtxMSh

Answer 1

您的$("#Load").click()函数不会触发填充CountyList。在传递相同值的情况下，调用2个ajax方法似乎也没有必要。您可以使用对方法的单个调用，该方法返回包含所需所有数据的JSON。

脚本

$('#Load').click(function () {
  var url = '@Url.Action("GetOrderDetails")';
  var id = $('#LoadOrderDetailID').val();
  var stateList = $('#StateList');
  var countyList = $('#CountyList');
  $.getJSON(url, { ID: id }, function(data) {
    if(data.State != stateList.val()) {
      // need to repopulate counties
      countyList.empty();
      $.each(data.CountyList, function(index, item) {
        countyList.append($('<option></option>').val(item.Value).text(item.Text));
      });
      stateList.val(data.State);
    }
    countyList.val(data.County);
  });
});

控制器

public JsonResult GetOrderDetails(int ID)
{
  var state = // get the state value
  var county = // get the city value
  var countyList = // get the value and display text properties of counties
  // for example
  var countyList = db.Countys.Select(c => new
  {
    Value = c.ID,
    Text = c.Name
  }
  return Json(new { State = state, County = county, CountyList = countyList }, JsonRequestBehavior.AllowGet);  
}

Answer 2

这里有几个问题。1) .val()不会触发更改事件，所以您的statelist.val(数据)不会触发您的$statelist.change() --根据设计，更改事件只在用户输入时触发。您可以手动触发更改，即您的代码变成：

​

statelist.val(data);
statelist.change();

​

这将解决你眼前的问题。2)更大的问题是，您在这里运行异步代码，并且假设它将以特定的顺序运行。因此，一旦通过执行上面的#1来修复您的问题，当一个Ajax调用按顺序结束时(就像它们一定要做的那样)，您仍然会遇到问题，因此您将有一些行的实例。

Countylist.html(数据)；

在行后执行：

Countyname.val(数据)

您确实需要重新考虑您的逻辑，因为其他人说，您不需要两个单独的调用县和价值和县名单。此外，您还应该在第一个返回之后显式地进行第二个ajax调用(在回调中，或者在change事件中)，这样您的代码就不会以某种随机顺序执行。