Question

如果用户从HTML下拉列表 A 中选择一个值，我想对服务器进行ajax调用以填充HTML下拉列表 B 根据用户的选择。

我正在使用带有EF 4的ASP.NET MVC 4.我该怎么做？

Answer 1

侦听第一个下拉列表的更改事件，然后以JSON格式加载第二个下拉列表的内容并将其注入第二个下拉列表

<select id="country">
  <option value='1'>USA</option>
  <option value='2'>Canada</option>
</select>
<select id="States"></select>

和脚本

$(function(){
  $("#country").change(function(){
    var _this=$(this);
    var items="";
    $.getJSON("@Url.Action("GetStates","Country")/"+_this.val(),function(data){
           if(data.Status==="Success")
           {
              $.each(data.Items,function(index, item){
                 items=+"<option value='"+item.ID+'">"+item.Name+"</option>";
              });                 
           }
           $("#states").html(items);
    });
  });       
});

假设您的GetStates操作方法返回带有ID和名称的JSON数据，如下所示。

public ActionResult GetStates(int id)
{
  List<State> stateList=yourRepositary.GetStatesForCountry(id);
  return Json(new { Status="Success", Items=stateList},
                                           JsonRequestBehaviour.AllowGet);
}

假设GetStatesForCountry方法返回一个状态对象列表，其中ID和Name为属性。

Answer 2

jQuery是你最好的朋友。首先将change事件绑定到您的下拉列表A，然后对服务器进行ajax调用。最后获取响应并将其设置到您的下拉列表B

$('#ddlA').change(function() {
    $('#ddlB').load('server/pageThatReturnsHtml')
});

这假设'server / pageThatReturnsHtml'返回html，例如：

<option value="option1" selected="selected">Option 1</option>
 <option value="option2">Option 2</option>

但是你也可以返回一个json对象并迭代结果以向你的ddl B添加项目

当用户选择另一个列表中的值</select>时，从服务器端集合中填充<select>列表

2 个答案: