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='-1'>全部</option>");

//或者
        
$("#ManagerSelect")[0].options.add(new Option("全部", "-1"));
原文地址:https://www.cnblogs.com/hydor/p/4095430.html