<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="JqueryDemoTest.WebForm2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#btn').click(function () { $.post('Handler.ashx', { val: $("#<%=ddlMain.ClientID %>").val() }, function (data) { var json = eval(data); var html = ''; for (var i in json) { html += '<option value="' + json[i].Value + '">' + json[i].Name + '</option>'; } $("#<%=ddlSub.ClientID %>")[0].options.length = 0; $(html).appendTo($("#<%=ddlSub.ClientID %>")); }); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <asp:DropDownList ID="ddlMain" runat="server"> <asp:ListItem Text="一级城市" Value="1"></asp:ListItem> <asp:ListItem Text="旅游城市" Value="2"></asp:ListItem> </asp:DropDownList> <asp:DropDownList ID="ddlSub" runat="server"> </asp:DropDownList> <input type="button" id='btn' value='click me' /> </div> </form> </body> </html>
code ashx
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace JqueryDemoTest { /// <summary> /// Summary description for Handler /// </summary> public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string json = string.Empty; if (context.Request.Form["val"] == "1") { json = "[{\"Name\":\"北京\",\"Value\":1},{\"Name\":\"深圳\",\"Value\":2},{\"Name\":\"上海\",\"Value\":3}]"; } else if (context.Request.Form["val"] == "2") { json = "[{\"Name\":\"杭州\",\"Value\":4},{\"Name\":\"苏州\",\"Value\":5},{\"Name\":\"桂林\",\"Value\":6}]"; } context.Response.Write(json); context.Response.End(); } public bool IsReusable { get { return false; } } } }