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"));