如何根据主下拉列表更新 2 个下拉列表？

Question

我正在尝试根据主下拉列表的值同时更新 2 个相关下拉列表。是否有可能，如果是，我的代码有什么问题？请正确。

也许最好使用 ASP.NET 级联下拉菜单？如果是，如何使用 3 个下拉菜单？

查看

@model RKB.Models.CountryStateViewModel

<br /><br/>
      @using (Html.BeginForm("Index", "Home"))
      {
      <div class="container">
          <div class="form-group">
              @if (ViewBag.CountryList != null)
              {
                  @Html.DropDownListFor(model => model.CountryId, ViewBag.CountryList as SelectList, "Выберите страну", new { @class = "form-control" })
              }
          </div>
          <div class="form-group">
              @Html.DropDownListFor(model => model.StateId, new SelectList(" "), "Выберите штат", new { @class = "form-control" })
          </div>
          <div class="form-group">
              @Html.DropDownListFor(model => model.PriceId, new SelectList(" "), "Выберите цену", new { @class = "form-control", @style = "display:none" })
          </div>
          <button type="submit">Send</button>
      </div>
      }
      <script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function () {
        $("#CountryId").change(function () {
            $.get("/Home/GetStateList", { CountryId: $("#CountryId").val() }, function (data) {
                $("#StateId").empty();
                $.each(data, function (index, row) {
                    $("#StateId").append("<option value='" + row.StateId + "'>" + row.StateName + "</option>")
                });
            });
        })

    });

    $(document).ready(function () {
        $("#StateId").change(function () {
            $.get("/Home/PriceList", { StateId: $("#StateId").val() }, function (data) {
                $("#PriceId").empty();
                $.each(data, function (index, row) {
                    $("#PriceId").append("<option value='" + row.PriceId + "'>" + row.Price1 + "</option>")
                });
            });
        })

    });

</script>

控制器

public class HomeController : Controller
{
    RKBEntities db = new RKBEntities();

    public ActionResult Index()
    {
        List<Country> CountryList = db.Countries.ToList();
        ViewBag.CountryList = new SelectList(CountryList, "CountryId", "CountryName");
        return View();
    }

    [HttpPost]
    public ActionResult Index(CountryStateViewModel csm)
    {

        return View();
    }

    public JsonResult GetStateList(int CountryId)
    {
        db.Configuration.ProxyCreationEnabled = false;
        List<State> StateList = db.States.Where(x => x.CountryId == CountryId).ToList();
        return Json(StateList, JsonRequestBehavior.AllowGet);
    }

    public JsonResult GetPriceList(int StateId)
    {
        db.Configuration.ProxyCreationEnabled = false;
        List<Price> PriceList = db.Prices.Where(x => x.StateId == StateId).ToList();
        return Json(PriceList, JsonRequestBehavior.AllowGet);
    }
}

Answer 1

朋友，你使用了错误的属性 json。 例如：row.StateId => row.stateId。

只需尝试像这样修改以下内容：

<script>
    $(document).ready(function () {
        $("#CountryId").change(function () {
            $.get("/Home/GetStateList", { CountryId: $("#CountryId").val() }, function (data) {
                $("#StateId").empty();
                $.each(data, function (index, row) {
                    $("#StateId").append("<option value='" + row.stateId + "'>" + row.stateName + "</option>")
                });
            });
        })

    });

    $(document).ready(function () {
        $("#StateId").change(function () {
            $.get("/Home/PriceList", { StateId: $("#StateId").val() }, function (data) {
                $("#PriceId").empty();
                $.each(data, function (index, row) {
                    $("#PriceId").append("<option value='" + row.priceId + "'>" + row.price1 + "</option>")
                });
            });
        })

    });

</script>

希望能帮到你，我的朋友 :))