Question

这样做时我遇到了一个小问题。目前我有一个脚本在页面加载时加载状态列表。很好，它与countylist级联，所以每当状态改变时，它都会向服务器发送一个ajax调用，然后根据状态将countylist项目输入到countylist下拉列表中。现在我想在保持相同功能的同时做一些不同的事情。我希望能够通过一键式#load获得州和县。因此，一旦我点击加载，它将向服务器发送一个ajax调用，并返回一个与该加载调用相关联的州和县名称。但是这里存在问题，我可以将状态列表值更改为状态，但它根本不会更改数字列表。县列表完全为空，因此我必须打开州列表并单击州列表以加载县列表。我尝试使用加载，点击，更改等。但它没有用，所以我想知道你是否可以帮助我。我在这里谈论的是一些代码。

$(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（data）不会触发你的$ statelist.change（）这是设计使然，更改事件只会触发用户输入。您可以通过手动触发更改强制更改，即您的代码变为：

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

这将解决您的直接问题。 2）更大的问题是你在这里运行异步代码而你假设它将以某种特定的顺序运行。因此，一旦通过执行上面的＃1解决了您的问题，当一个Ajax调用不按顺序完成时（因为它们必然会这样做），您仍会遇到问题，因此您将有一些实例所在的行

countylist.html（数据）;

在行后执行：

countyname.val（数据）

你真的需要重新考虑你的逻辑，因为其他人说你不需要两个单独的县，价值和县名单。此外，您应该在第一次返回之后（在回调中或在更改事件中）显式地进行第二次ajax调用，以便您的代码不会以某种随机顺序执行。

基于值json请求加载列表

2 个答案: