最初のドロップダウン選択の選択に基づいて2番目のドロップダウンを更新するにはどうすればよいですか？

Question

私は2つのDropDownListForヘルパーを持ち、2番目のSelectListは最初のものから選択した値に依存します。

私がする必要があるのは、ユーザーが最初のDropDownListForヘルパーから値を選択したときに、2番目のDropDownListForヘルパーのSelectListを適切な値で更新する必要があることです。

このSelectListをjQueryでどのように更新できますか？

Answer 1

最初のドロップダウンのchangeイベントを聞いて、選択した値を読み取り、この値でサーバーにajaxリクエストを行う必要があります。この値を受け取り、2番目のドロップダウンのデータを返すアクションメソッドがあります。あなたのajax呼び出しのコールバックで、戻って来るjsonデータを読んで、それを見て、2番目のドロップダウンに移ります。

フォームは2つのドロップダウン、CountryControllerにGetStatesアクションメソッドを想定すると、米国

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

    }); 

}); 

のための国のために1つずつを持っていると仮定すると、国イドを受け入れ、ため（バリューと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); 
}