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

【问题标题】：How to update a second dropdown based on the selection of first dropdown selection?如何根据第一个下拉选择的选择更新第二个下拉列表？
【发布时间】：2016-08-03 07:42:33
【问题描述】：

我有两个 DropDownListFor 助手，第二个的 SelectList 取决于第一个的选定值。

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

如何使用 jQuery 更新这个 SelectList？

【问题讨论】：

标签： jquery razor model-view-controller drop-down-menu

【解决方案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+="<option value='"+ b.Value +"'>" + b.Text + "</option>";
         });        
         $("#State").html(options);
     });

  });

});

假设CountryController 中的GetStates 操作方法接受国家ID 并返回属于所选国家/地区的州的项目列表（具有Value 和Text 属性）。

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

【讨论】：