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

Posted 2023-05-09

【中文标题】如何根据主下拉列表更新 2 个下拉列表？

【英文标题】：How to update 2 dropdowns based on primary dropdown?

【发布时间】：2020-06-18 14:39:40

【问题描述】：

我正在尝试根据主下拉列表的值同时更新 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);
    

【参考方案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>

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

【讨论】：

将尝试这样做。但是，第一个更改事件对我有用。在第二个 jquery 函数中，我使用 Price 属性，因为它是 Ado 自动生成的属性的名称。网。也许应该改变其他东西？

@P3ar1baron：是的，也许吧。你可以使用调试器来检查属性，我的朋友。