如何根據第一個下拉選擇的選擇來更新第二個下拉列表？

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