Select级联菜单，用Ajax获取Json绑定下拉框（jQuery）

浏览数：45 / 时间：2015年06月09日

需求类似这样  ↓ ↓ ↓

  --》   

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

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 java src com log 数据 http class style 代码 java src com log 数据 http

相关文章

随机文章

您可能还喜欢

您可能还喜欢