基于值 json 请求的加载列表

Load list based on value json request

本文关键字：加载 列表 请求 于值 json      更新时间：2023-09-26

我在这样做时遇到了一个小问题。目前我有一个脚本，可以在页面加载时加载状态列表。很好，它与县列表级联，因此每当状态更改时，它都会向服务器发送 ajax 调用，然后根据状态将县列表项放入县列表下拉列表中。现在我想在保持相同功能的同时做一些不同的事情。我希望能够通过一键 #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

您的$("#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);  
}
这里有

几个问题。1( .val(( 不会触发更改事件，因此您的 statelist.val(data( 不会触发您的 $statelist.change(( 这是设计使然，更改事件仅在用户输入时触发。您可以通过手动触发来强制更改，即您的代码变为：

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

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

县名单.html(数据(;

在行后执行：

县名.瓦尔(数据(

你

真的需要重新思考你的逻辑，正如其他人所说，你不需要对县和值以及县列表进行两次单独的调用。此外，您应该在第一次返回之后显式进行第二次 ajax 调用(在回调或 change 事件中(，以便您的代码不会以某种随机顺序执行。

相关文章：