首页 > 代码库 > Select级联菜单，用Ajax获取Json绑定下拉框（jQuery）
Select级联菜单，用Ajax获取Json绑定下拉框（jQuery）
需求类似这样 ↓ ↓ ↓
--》 
菜单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=http://www.mamicode.com/‘-1‘>全部");//或者 $("#ManagerSelect")[0].options.add(new Option("全部", "-1"));
Select级联菜单，用Ajax获取Json绑定下拉框（jQuery）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。