zoukankan      html  css  js  c++  java
  • 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"));
  • 相关阅读:
    pip安装指定版本的package
    学习 git基础命令
    美剧命名规则
    Mac OS X中bogon的处理
    学习Maven之Maven Clean Plugin
    学习Maven之Cobertura Maven Plugin
    博客园markdown代码块支持的语言
    学习Maven之Maven Surefire Plugin(JUnit篇)
    C# Invoke或者BeginInvoke的使用
    LINQ to SQL语句(20)之存储过程
  • 原文地址:https://www.cnblogs.com/hydor/p/4095430.html
Copyright © 2011-2022 走看看