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

Question

我有两个DropDownListFor助手和第二个选择列表取决于从第一个选定的值。

因此，我需要做的是：当用户从第一个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+="<option value='"+ b.Value +"'>" + b.Text + "</option>"; 
     });   
     $("#State").html(options); 
    }); 

    }); 

}); 

假设GetStates行动方法CountryController接受国家ID和返回的项目列表（使用值和文本属性）将州属于选定的国家。

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); 
}