需求类似这样 ↓ ↓ ↓
--》
菜单A发生变化,动态取数据填充下拉菜单B。
JS代码如下:
$(function () {
$("#TeamSelect").change(function () { var tid = $("#TeamSelect option:selected").val();
$.ajax({
url: "/ajax/ajaxGetManagerByTeam.aspx?teamId="+tid,
type: "Post",
contentType: "application/json",
dataType: "json",
success: function (data) { var ddl = $("#ManagerSelect");
//删除节点
$("#ManagerSelect option").remove();
//转成Json对象
var result = eval(data); //循环遍历 下拉框绑定 $(result).each(function (key) {
//添加option 对应Json对象名称
var opt = $("").text(result[key].ManagerName).val(result[key].ManagerID);
ddl.append(opt);
});
},
error: function () {
alert("Error");
}
});
});
});
ajaxGetManagerByTeam.aspx.cs页面代码如下:
protected void Page_Load(object sender, EventArgs e)
{ var teamId = 0; try
{ var teamIdStr = Request.QueryString["teamId"]; if (!string.IsNullOrEmpty(teamIdStr))
{ int.TryParse(teamIdStr, out teamId);
DataTable dt = GetManager(teamId); //GetManager()是一个返回DataTable类型数据的方法 string proStr = JsonConvert.SerializeObject(dt); //将DataTable序列化为Json格式的字符串
Response.ContentType = "text/plain";
Response.Write(proStr);
}
} catch(Exception ex)
{
Response.Write(ex);
}
}
另可给Select添加默认项:
$("#ManagerSelect").append("全部");//或者 $("#ManagerSelect")[0].options.add(new Option("全部", "-1"));