您的位置：首页 > Web前端 > JQuery

使用jquery JSON Handler实现级联效果

2010-03-30 11:19 716 查看

前台：

<script>
        $(document).ready(function(){



           //第一个下拉框的改变事件
            $("#ddlType").change(function(){

                 //调用Handler时需传递一个随机参数，告诉浏览器这是一个新请求，以免调用缓存中的Handler中存储的类型，以至于其他页面中添加的新类型不能显示出来。

                jQuery.getJSON("../ProductTypeHandler.ashx?w="+a,{"tid":$(this).val(),"r":Math.random()},function(date){

                     $("#ddlXiaoType").children().remove();
                    for(var i in date)
                    {
                        $("#ddlXiaoType").append("<option value='"+date[i].tid+"'>"+date[i].name+"</option>");
                    }

                  });
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="text-align:left;">
        <table width="60%" style="font-size:12px;border-collapse: collapse; text-align:left" border="1px" cellpadding="0" cellspacing="0" bordercolor="#C0C0C0">
         <tr><td style="text-align: center; height:20px; background-color:#CCCCCC " colspan="2" >添加产品</td></tr>
              <tr>

                  <td style="text-align: right">类型:</td><td>
                       <asp:DropDownList ID="ddlType" runat="server" Width="129px">
                       </asp:DropDownList>
                       <asp:DropDownList ID="ddlXiaoType" runat="server" Width="108px">
                       </asp:DropDownList>

                 </td>

                </tr>
        </table>
    </div>
    </form>
</body>

ProductTypeHandler.ashx中的定义：

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            int tid = Convert.ToInt32(context.Request.Params["tid"]);
            List<cl.Model.Product_Type> newsList = new cl.BLL.gu.Product_Type().GetList(tid);//此处调用后台方法

            string locationString = "";
            locationString += "[";
            for (int i = 0; i < newsList.Count; i++)
            {
                locationString += "{/"tid/":/"" + newsList[i].t_id + "/",/"name/":/"" + newsList[i].t_name + "/"}";
                if (i < newsList.Count - 1)
                    locationString += ",";
            }
            locationString += "]";
            context.Response.Write(locationString);//返回json字符串
        }

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： json jquery function date server asp

相关文章推荐

新的分享

章节导航