如何根据第一个下拉选择的选择更新第二个下拉列表？

我有两个DropDownListFor帮助器，第二个的SelectList取决于第一个选择的值。

所以，我需要做的是：当用户从第一个DropDownListFor助手中选择一个值时，必须使用适当的值更新第二个DropDownListFor助手的SelectList。

如何使用jQuery更新此SelectList？

Answer 1

您需要侦听第一个下拉列表的change事件，读取所选值并使用此值向服务器发出ajax请求。 有动作方法接受此值并返回第二个下拉列表的数据。 在你的ajax调用的回调中，读取回来的json数据，查看它并填充第二个下拉列表。

假设您的表单有2个下拉列表，一个用于国家，一个用于国家

 $(function(){ $("#Country").change(function(){ var countryId = $(this).val(); var url = "@Url.Action("GetStates,"Country")"+countryId; $.getJSON(url,function(data){ var options=""; $.each(data,function(a,b){ options+="" + b.Text + ""; }); $("#State").html(options); }); }); }); 

假设GetStates操作方法接受国家标识并返回属于所选国家/地区的项目列表（具有值和文本属性）。

 public ActionResult GetStates(int id) { var dummyStates = new List { new SelectListItem { Value="1", Text="Michigan"}, new SelectListItem { Value="2", Text="Florida"}, new SelectListItem { Value="3", Text="Seattle"} }; return Json(dummyStates,JsonRequestBehaviour.AllowGet); }