热门：网页模板.net视频教程JQueryMVCjsonExtJs源码示例三级联动JQuery菜单
您现在的位置：.Net中文社区>> AJAX编程>>正文内容

省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

发布时间：2010年06月17日点击数： 次佚名

本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例。前段时间需要作一个的Web前端应用，需要用多个框架，一个典型的应用场景是省市三级联动，基于此应用，特将三种主要的ajax框架略作整理，方便有需要的朋友查阅。

在示例之前，我们先设置一个演示数据源，新建一个项目，项目结构如图：
 

主要文件如下：
AreaModel.cs:

  1. using System;  
  2. using System.Collections.Generic;  
  3. namespace Downmoon.Framework.Model  
  4. {
  5.     #region PopularArea  
  6.     public class Area  
  7.     {  
  8.         private string m_Area_ID;  
  9.         /// <summary>  
  10.         /// 地区编号  
  11.         /// </summary>  
  12.         public string Area_ID  
  13.         {  
  14.             get { return m_Area_ID; }  
  15.             set { m_Area_ID = value; }  
  16.         }  
  17.  
  18.         private string m_Area_Name;  
  19.         /// <summary>  
  20.         /// 地区名称  
  21.         /// </summary>  
  22.         public string Area_Name  
  23.         {  
  24.             get { return m_Area_Name; }  
  25.             set { m_Area_Name = value; }  
  26.         }  
  27.  
  28.         private double m_Area_Order;  
  29.         /// <summary>  
  30.         /// 排序  
  31.         /// </summary>  
  32.         public double Area_Order  
  33.         {  
  34.             get { return m_Area_Order; }  
  35.             set { m_Area_Order = value; }  
  36.         }  
  37.  
  38.         private int m_Area_Layer;  
  39.         /// <summary>  
  40.         /// 层级  
  41.         /// </summary>  
  42.         public int Area_Layer  
  43.         {  
  44.             get { return m_Area_Layer; }  
  45.             set { m_Area_Layer = value; }  
  46.         }  
  47.  
  48.         private string m_Area_FatherID;  
  49.         /// <summary>  
  50.         /// 父级ID  
  51.         /// </summary>  
  52.         public string Area_FatherID  
  53.         {  
  54.             get { return m_Area_FatherID; }  
  55.             set { m_Area_FatherID = value; }  
  56.         }  
  57.  
  58.         public Area() { }  
  59.  
  60.         public Area(string id, string name, double order, int layer, string father)  
  61.         {  
  62.             this.Area_ID = id;  
  63.             this.Area_Name = name;  
  64.             this.m_Area_Order = order;  
  65.             this.m_Area_Layer = layer;  
  66.             this.m_Area_FatherID = father;  
  67.  
  68.         }  
  69.     }
  70.     #endregion  
  71. } 

AreaControl.cs:
 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using Downmoon.Framework.Model;  
  4.  
  5. namespace Downmoon.Framework.Controllers  
  6. {  
  7.     public class AreaList : IArea  
  8.     {  
  9.         // Area singleton  
  10.         private static AreaList instance;  
  11.         public static AreaList Instance  
  12.         {  
  13.             get 
  14.             {  
  15.                 if (AreaList.instance == null)  
  16.                 {  
  17.                     AreaList.instance = new AreaList();  
  18.                 }  
  19.                 return AreaList.instance;  
  20.             }  
  21.         }  
  22.  
  23.         public List<Area> GetAreaList()  
  24.         {  
  25.             List<Area> Areas = new List<Area>();  
  26.             Areas.Add(new Area("110000", "北京市", 0, 1, "000000"));  
  27.             Areas.Add(new Area("110100", "市辖区", 0, 2, "110000"));  
  28.             Areas.Add(new Area("110101", "东城区", 0, 3, "110100"));  
  29.             Areas.Add(new Area("110102", "西城区", 0, 3, "110100"));  
  30.             Areas.Add(new Area("110103", "崇文区", 0, 3, "110100"));  
  31.             Areas.Add(new Area("330000", "浙江省", 0, 1, "000000"));  
  32.             Areas.Add(new Area("330100", "杭州市", 0, 2, "330000"));  
  33.             Areas.Add(new Area("330200", "宁波市", 0, 2, "330000"));  
  34.             Areas.Add(new Area("330102", "上城区", 0, 3, "330100"));  
  35.             Areas.Add(new Area("330103", "下城区", 0, 3, "330100"));  
  36.             Areas.Add(new Area("330104", "江干区", 0, 3, "330100"));  
  37.             Areas.Add(new Area("330105", "拱墅区", 0, 3, "330100"));  
  38.             Areas.Add(new Area("330106", "西湖区", 0, 3, "330100"));  
  39.             Areas.Add(new Area("330203", "海曙区", 0, 3, "330200"));  
  40.             Areas.Add(new Area("330204", "江东区", 0, 3, "330200"));  
  41.             Areas.Add(new Area("330205", "江北区", 0, 3, "330200"));  
  42.             Areas.Add(new Area("330206", "北仑区", 0, 3, "330200"));  
  43.             Areas.Add(new Area("330211", "镇海区", 0, 3, "330200"));  
  44.             return Areas;  
  45.         }  
  46.  
  47.         public List<Area> GetAreaListFindByParentID(string filter)  
  48.         {  
  49.             return GetAreaList().FindAll(  
  50.                 delegate(Area ar)  
  51.                 {  
  52.                     return ar.Area_FatherID == filter;  
  53.                 }  
  54.                 );  
  55.         }  
  56.     }  
  57. } 

Factory.cs

  1. using System;  
  2. using System.Collections.Generic;  
  3. //using Downmoon.Framework.Model;  
  4. namespace Downmoon.Framework.Controllers  
  5. {  
  6.     public class Factory  
  7.     {  
  8.         public static IArea GetAreaController()  
  9.         {  
  10.             return AreaList.Instance;  
  11.         }  
  12.     }  
  13. }  

IArea.cs

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Text;  
  4. using Downmoon.Framework.Model;  
  5.  
  6. namespace Downmoon.Framework.Controllers  
  7. {  
  8.     public interface IArea  
  9.     {  
  10.         List<Area> GetAreaList();  
  11.         List<Area> GetAreaListFindByParentID(string filterID);  
  12.     }  
  13. }  

一、基于aspnet自带的Ajax框架，主要好处是与asp.net完全集成，无需写过多的js。缺点是在framework2下需作一些设置，在Framework 4下无需设置。
Framework 2：


需首先在web.config文件中作配置：

  1. <?xml version="1.0"?> 
  2. <configuration> 
  3.     <configSections> 
  4.         <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> 
  5.             <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> 
  6.                 <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/> 
  7.                 <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> 
  8.                     <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere" /> 
  9.                     <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" /> 
  10.                     <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" /> 
  11.                 </sectionGroup> 
  12.             </sectionGroup> 
  13.         </sectionGroup> 
  14.     </configSections> 
  15.  
  16.     <system.web> 
  17.         <customErrors defaultRedirect="" /> 
  18.         <trace mostRecent="true" pageOutput="true" /> 
  19.         <pages> 
  20.             <controls> 
  21.                 <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 
  22.             </controls> 
  23.         </pages> 
  24.         <compilation> 
  25.             <assemblies> 
  26.                 <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" /> 
  27.             </assemblies> 
  28.         </compilation> 
  29.  
  30.         <httpHandlers> 
  31.             <remove verb="*" path="*.asmx"/> 
  32.             <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 
  33.             <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 
  34.             <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/> 
  35.         </httpHandlers> 
  36.  
  37.         <httpModules> 
  38.             <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 
  39.         </httpModules> 
  40.     </system.web> 
  41.  
  42.  
  43.     <system.webServer> 
  44.         <validation validateIntegratedModeConfiguration="false"/> 
  45.         <modules> 
  46.             <add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 
  47.         </modules> 
  48.         <handlers> 
  49.             <remove name="WebServiceHandlerFactory-Integrated" /> 
  50.             <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" 
  51.                  type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 
  52.             <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" 
  53.                  type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 
  54.             <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" /> 
  55.         </handlers> 
  56.     </system.webServer> 
  57. </configuration> 

前台页面：
 

  1. <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"> 
  2.     </asp:ScriptManager> 
  3.     <div> 
  4.         <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
  5.             <ContentTemplate> 
  6.                 <table width="500" border="0" cellpadding="0" cellspacing="2" > 
  7.                     <tr> 
  8.                         <td height="25" bgcolor="#EAEAEA" > 
  9.                             请选择省/市/区：  
  10.                         </td> 
  11.                         <td bgcolor="#f7f7f7"> 
  12.                             &nbsp; &nbsp;<asp:DropDownList ID="dpProvince" runat="server" 
  13.                                 AutoPostBack="true" onselectedindexchanged="dpProvince_SelectedIndexChanged" /> 
  14.                             &nbsp; &nbsp;<asp:DropDownList ID="dpCity" runat="server" AutoPostBack="true" 
  15.                                 onselectedindexchanged="dpCity_SelectedIndexChanged" /> 
  16.                             &nbsp; &nbsp;<asp:DropDownList ID="dpArea" runat="server" AutoPostBack="false" 
  17.                                  /> 
  18.                         </td> 
  19.                     </tr> 
  20.                     <tr> 
  21.                         <td height="25" bgcolor="#EAEAEA" > 
  22.                         </td> 
  23.                         <td  bgcolor="#f7f7f7"> 
  24.                             <asp:UpdateProgress ID="UpdateProgress1" runat="server"> 
  25.                                 <ProgressTemplate> 
  26.                                     正在查询，请稍候……………………</ProgressTemplate> 
  27.                             </asp:UpdateProgress> 
  28.                         </td> 
  29.                     </tr> 
  30.                     
  31.                 </table> 
  32.             </ContentTemplate> 
  33.             <Triggers> 
  34.                 <asp:AsyncPostBackTrigger ControlID="dpProvince" EventName="SelectedIndexChanged" /> 
  35.                 <asp:AsyncPostBackTrigger ControlID="dpCity" EventName="SelectedIndexChanged" /> 
  36.  
  37.             </Triggers> 
  38.         </asp:UpdatePanel> 
  39.     </div> 

Framework 4：与代码完全一样，只是无需在web.config中作配置。

如图：


二、基于JQuery1.4.1的Ajax框架，主要好处是与后续版本的asp.net完全集成。

基于ashx作一个Request，主要代码：

 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Web;  
  4. using Downmoon.Framework.Controllers;  
  5. using Downmoon.Framework.Model;  
  6. using System.Text;  
  7. namespace dropdown_JQuery14_Net2  
  8. {  
  9.     /// <summary>  
  10.     /// Summary description for AjaxRequest  
  11.     /// </summary>  
  12.     public class AjaxRequest : IHttpHandler  
  13.     {  
  14.  
  15.         public void ProcessRequest(HttpContext context)  
  16.         {  
  17.  
  18.             string Area_FatherID = string.Empty;  
  19.             if (context.Request["pid"] != null)  
  20.             { Area_FatherID = context.Request["pid"].ToString(); }  
  21.             string parentId = string.Empty;  
  22.             //mydbDataContext db = new mydbDataContext();  
  23.             //根据传过来的Value值 进行查询  
  24.             //List<ChinaStates> list = db.ChinaStates.Where(c => c.ParentAreaCode == strId).ToList();  
  25.             List<Area> list = Factory.GetAreaController().GetAreaListFindByParentID(Area_FatherID);  
  26.             context.Response.ContentType = "application/json";  
  27.             context.Response.ContentEncoding = Encoding.UTF8;  
  28.             context.Response.Write(ListToJson(list));  
  29.             context.Response.End();  
  30.         }  
  31.         public string ListToJson(List<Area> list)  
  32.         {  
  33.             StringBuilder sb = new StringBuilder();  
  34.             if (list != null)  
  35.             {  
  36.                 sb.Append("[");  
  37.                 for (int i = 0; i < list.Count; i++)  
  38.                 {  
  39.                     sb.Append("{");  
  40.                     sb.Append("\"Area_ID\":\"" + list[i].Area_ID + "\",");  
  41.                     sb.Append("\"Area_Name\":\"" + list[i].Area_Name + "\"");  
  42.                     //sb.Append("\"Area_FatherID\":\"" + list[i].Area_FatherID + "\"");  
  43.                     if (i != list.Count - 1)  
  44.                     {  
  45.                         sb.Append("},");  
  46.                     }  
  47.                 }  
  48.  
  49.             }  
  50.             sb.Append("}");  
  51.             sb.Append("]");  
  52.             return sb.ToString();  
  53.         }  
  54.         public bool IsReusable  
  55.         {  
  56.             get  
  57.             {  
  58.                 return false;  
  59.             }  
  60.         }  
  61.     }  
  62. } 

前台：aspx
 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head runat="server"> 
  4.     <title></title> 
  5.     <style type="text/css"> 
  6.         #dpCity  
  7.         {  
  8.             display: none;  
  9.             position: relative;  
  10.         }  
  11.         #dpArea  
  12.         {  
  13.             display: none;  
  14.             position: relative;  
  15.         }  
  16.     </style> 
  17.     <script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.js"></script> 
  18. </head> 
  19. <body> 
  20.     <form id="form1" runat="server"> 
  21.     <div> 
  22.         请选择省/市/区： &nbsp; &nbsp;<asp:DropDownList ID="dpProvince" runat="server" /> 
  23.         &nbsp; &nbsp;<asp:DropDownList ID="dpCity" runat="server"> 
  24.         </asp:DropDownList> 
  25.         &nbsp; &nbsp;<asp:DropDownList ID="dpArea" runat="server" AutoPostBack="false" /> 
  26.     </div> 
  27.     <script language="javascript" type="text/javascript"> 
  28.         
  29.         $(function () {  
  30.             var $dp1 = $("#dpProvince");  
  31.             var $dp2 = $("#dpCity");  
  32.             var $dp3 = $("select[name$=dpArea]");  
  33.             $dp1.focus();  
  34.             //alert($dpCity);  
  35.             loadAreas("000000", "0");  
  36.             $dp1.bind("change keyup", function () {  
  37.                 if ($(this).val() != "") {  
  38.                     //alert($("select option:selected").val());  
  39.                     //loadAreas($("select option:selected").val(), "1");  
  40.                     var strPid = $dp1.attr("value"); //获取城市  
  41.                     loadAreas(strPid, "1");  
  42.                     $dp2.fadeIn("slow");  
  43.                 } else {  
  44.                     $dp2.fadeOut("slow");  
  45.                 }  
  46.             });  
  47.             $dp2.bind("change keyup", function () {  
  48.                 var strCId = $dp2.attr("value"); //获取城市  
  49.                 if ($(this).val() != "") {  
  50.                     loadAreas(strCId, "2");  
  51.                     $dp3.fadeIn("slow");  
  52.                 } else {  
  53.                     $dp3.fadeOut("slow");  
  54.                 }  
  55.             });  
  56.         });  
  57.         function loadAreas(selectedItem, level) {  
  58.             $.getJSON("AjaxRequest.ashx?pid=" + selectedItem, function (data) {  
  59.                 switch (level) {  
  60.                 case "0":  
  61.                        $("#dpProvince").html("");  
  62.                        $("#dpProvince").append("<option value='' selected='selected'>请选择...</option>");  
  63.                         for (var i = 0; i < data.length; i++) {  
  64.                            $("#dpProvince").append($("<option></option>").val(data[i].Area_ID).html(data[i].Area_Name));  
  65.                         };  
  66.                         break;  
  67.                     case "1":  
  68.                        $("#dpCity").html("");  
  69.                        $("#dpCity").append("<option value='' selected='selected'>请选择...</option>");  
  70.                         for (var i = 0; i < data.length; i++) {  
  71.                            $("#dpCity").append($("<option></option>").val(data[i].Area_ID).html(data[i].Area_Name));  
  72.                         };  
  73.                         break;  
  74.                     case "2":  
  75.                         $("#dpArea").html("");  
  76.                         $("#dpArea").append("<option value='' selected='selected'>请选择...</option>");  
  77.                         for (var i = 0; i < data.length; i++) {  
  78.                            $("#dpArea").append($("<option></option>").val(data[i].Area_ID).html(data[i].Area_Name));  
  79.                         };  
  80.                         break;  
  81.                     
  82.                     default:  
  83.                         break;  
  84.                 }  
  85.             });  
  86.  
  87.         }         
  88.  
  89.     </script> 
  90.     </form> 
  91. </body> 
  92. </html> 

 

 三、基于ExtJS 3.2的Ajax框架。
后台：
 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Web;  
  4. using Downmoon.Framework.Controllers;  
  5. using Downmoon.Framework.Model;  
  6. using System.Text;  
  7. namespace dropdown_ExtJS32_Net2.Ajax  
  8. {  
  9.     /// <summary>  
  10.     /// Summary description for GetAreaXml  
  11.     /// </summary>  
  12.     public class GetAreaXml : IHttpHandler  
  13.     {  
  14.         //string baseCode = "000000";  
  15.         public void ProcessRequest(HttpContext context)  
  16.         {  
  17.             string parentId = "000000";  
  18.             if (context.Request["pid"] != null)  
  19.             {  
  20.                 parentId = context.Request["pid"].ToString();  
  21.             }  
  22.             //parentId = (parentId.Length > 0) ? parentId : "000000";  
  23.             ////string parentId2 = "000000";  
  24.             ////if (context.Request["pid2"] != null)  
  25.             ////{  
  26.             ////    parentId2 = context.Request["pid2"].ToString();  
  27.             ////}
  28.             #region tony 2010.2.7 update  
  29.             List<Area> list = new List<Area>();  
  30.             //if (parentId.Length > 0)  
  31.             //{  
  32.                 list = Factory.GetAreaController().GetAreaListFindByParentID(parentId);  
  33.             //}  
  34.             ////else if (parentId2.Length > 0)  
  35.             ////{  
  36.             ////    list = Factory.GetAreaController().GetAreaListFindByParentID(parentId2);  
  37.             ////}
  38.  
  39.             #endregion  
  40.  
  41.             context.Response.AddHeader("Cache-Control", "no-cache, must-revalidate");  
  42.             context.Response.ContentEncoding = System.Text.Encoding.UTF8;  
  43.             context.Response.ContentType = "text/html";  
  44.  
  45.             StringBuilder sb = new StringBuilder();  
  46.  
  47.  
  48.             for (int i = 0; i < list.Count; i++)  
  49.             {  
  50.                 sb.Append("{\"Area_Name\":\"" + list[i].Area_Name + "\",");  
  51.                 sb.Append("\"Area_ID\":\"" + list[i].Area_ID + "\"},");  
  52.             }  
  53.  
  54.             string json = sb.ToString().TrimEnd(',');  
  55.  
  56.             context.Response.Write("{\"Results\":[" + json + "]}");  
  57.  
  58.  
  59.         }  
  60.  
  61.         public bool IsReusable  
  62.         {  
  63.             get  
  64.             {  
  65.                 return false;  
  66.             }  
  67.         }  
  68.     }  
  69. } 

前台页面.aspx
 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head runat="server"> 
  4.     <title>demo a dropdownlist by extjs 3.2 </title> 
  5.     <link rel="stylesheet" href="Scripts/ext/3.2/resources/css/ext-all.css" /> 
  6.     <script type="text/javascript" src="Scripts/ext/3.2/adapter/ext/ext-base.js"></script> 
  7.     <script type="text/javascript" src="Scripts/ext/3.2/ext-all.js"></script> 
  8.     <script type="text/javascript"> 
  9.         Ext.onReady(function () {  
  10.             //alert("extjs is Ok!");  
  11.         });  
  12.         function $() {  
  13.             return Ext.get(arguments[0]);  
  14.         }  
  15.  
  16.         /*Area*/  
  17.         function GetAreas() {  
  18.             //alert($(arguments[1]));  
  19.             var cityCtrl = $(arguments[1]).child("select");  
  20.  
  21.             var cityCtrlContainer = $(arguments[1]);  
  22.             cityCtrl.dom.options.length = 0;  
  23.             if ($(arguments[0]).getValue() == "") { cityCtrlContainer.hide(); return; }  
  24.           
  25.             cityCtrl.disabled = true;  
  26.             var selectValue2 = $(arguments[0]).getValue();  
  27.             Ext.Ajax.request({  
  28.                 url: arguments[2],  
  29.                 params: { pid: selectValue2 },  
  30.                 method: 'GET',  
  31.                 success: function (result, request) {  
  32.                     //alert(params);  
  33.                     var jsonData = Ext.util.JSON.decode(result.responseText);  
  34.                     //alert(jsonData.Results.length);  
  35.                     if (jsonData.Results.length > 0) {  
  36.                         cityCtrl.dom.options.add(new Option("请选择", "000000"));  
  37.                         for (var i = 0; i < jsonData.Results.length; i++) {  
  38.                             cityCtrl.dom.options.add(new Option(jsonData.Results[i].Area_Name, jsonData.Results[i].Area_ID));  
  39.                         }  
  40.                         cityCtrl.disabled = false;  
  41.                         cityCtrlContainer.show();  
  42.                     }  
  43.                     else {  
  44.                         cityCtrlContainer.hide();  
  45.                     }  
  46.  
  47.                 },  
  48.                 failure: function (result, request) { Ext.MessageBox.alert('Failed', 'Successfully posted form: ' + action.date); }  
  49.             });  
  50.         }  
  51.  
  52.         
  53.     </script> 
  54. </head> 
  55. <body> 
  56.     <form id="form1" runat="server"> 
  57.  
  58.     <table width="500" border="0" cellpadding="0" cellspacing="2"> 
  59.         <tr> 
  60.             <td height="25" bgcolor="#EAEAEA"> 
  61.                 <div style="float: left; height: 20px; line-height: 20px;"> 
  62.                     请选择</div> 
  63.                 <asp:DropDownList Style="float: left;" ID="dropProvince" runat="server" /> 
  64.                 <div style="float: left; height: 20px; line-height: 20px;"> 
  65.                     省</div> 
  66.                 <asp:Panel ID="panelArea" runat="server"> 
  67.                     <asp:DropDownList Style="float: left;" ID="dropArea" runat="server"   /> 
  68.                     <div style="float: left; height: 20px; line-height: 20px;"> 
  69.                         市</div> 
  70.                 </asp:Panel> 
  71.                 <asp:Panel ID="panelArea2" runat="server"  > 
  72.                     <asp:DropDownList Style="float: left;" ID="dropArea2" runat="server" /> 
  73.                     <div style="float: left; height: 20px; line-height: 20px;"> 
  74.                         县</div> 
  75.                 </asp:Panel> 
  76.             </td> 
  77.         </tr> 
  78.     </table> 
  79.     </form> 
  80. </body> 
  81. </html> 

效果如图：

随机文章推荐

本站热点业务

更多模板/案例展示

热门推荐

最近更新

关于我们 | 联系我们 | 团队日志 | 网站地图 | 网站合作
本站部份资源来于互联网,只供学习之用,不得用于商业,如有侵犯版权请联系告知,本站将第一时间删除!
copyright © 2008-2010 .Net中文社区 ASPXCS.NET™.All Rights Reserved 滇ICP备08102132号