Select串聯功能表，用Ajax擷取Json綁定下拉框（jQuery）

標籤：style   blog   http   io   color   ar   os   sp   java   

需求類似這樣  ↓ ↓ ↓

  --》   

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

 

Select串聯功能表，用Ajax擷取Json綁定下拉框（jQuery）