需求类似这样 ↓ ↓ ↓
--》
菜单A发生变化,动态取数据填充下拉菜单B。
JS代码如下:
<script type="text/javascript"> $(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 = $("<option></option>").text(result[key].ManagerName).val(result[key].ManagerID); ddl.append(opt); }); }, error: function () { alert("Error"); } }); }); }); </script>
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("<option value='-1'>全部</option>"); //或者 $("#ManagerSelect")[0].options.add(new Option("全部", "-1"));