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



razor model-view-controller (1)

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

假设你的表格有两个下拉菜单,一个给国家,一个给国家

$(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操作方法接受一个国家标识,并返回属于所选国家的状态的项目列表(带有值和文本属性)。

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

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

所以,我需要做的是:当用户从第一个DropDownListFor帮助器中选择一个值时,第二个DropDownListFor帮助器的SelectList必须用适当的值更新。

我如何使用jQuery更新这个SelectList?





drop-down-menu