用简易Ajax框架实现"省市二级联动下拉菜单"【原创】

操作环境:Visual Studio.Net2003
操作系统:window Xp SP2

如果您有任何意见,请留下您宝贵的意见以便告知

利用简易Ajax框架实现无刷新的省市二级联动的下拉菜单.其实很简单.关键在于处理服务器端返回的XML,对其进行拆分就OK了

ASPX页面: MyDropDownList.aspx ,代码如下

  

<% @ Page language = " c# "  Codebehind = " MyDropDownList.aspx.cs "  AutoEventWireup = " false "  Inherits = " AjaxFrmClass.MyDropDownList.MyDropDownList "   %>
<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN "   >
< HTML >
     < HEAD >
         < title > MyDropDownList </ title >
         < meta name = " GENERATOR "  Content = " Microsoft Visual Studio .NET 7.1 " >
         < meta name = " CODE_LANGUAGE "  Content = " C# " >
         < meta name = " vs_defaultClientScript "  content = " JavaScript " >
         < meta name = " vs_targetSchema "  content = " http://schemas.microsoft.com/intellisense/ie5 " >

        //简易AJAX框架CallBackObject.js
         < script src = .. / Javascript / CallBackObject.js type = text / javascript ></ script >
         < script language = " jscript " >
            function ChooseCity()
            {
                var f  =  document.Form1;
                var selecteditem  =  f.drpProvince.value;
                
                var cbo  =   new  CallBackObject();    
                cbo.OnComplete  =  Cbo_Complete;
                cbo.onError  =  Cbo_Error;

                //将数据传到Ajax.aspx服务器端去处理(Ajax.aspx.cs的代码在下一代码块)
                cbo.DoCallBack( " Ajax.aspx?ProvinceID= " + selecteditem);    
            }
            
            function Cbo_Complete(responseText, responseXML)
            {    
                 //信息已经成功返回，开始处理信息
                var returnStr  =  responseText;
            
                var xmlDom = new  ActiveXObject( " Microsoft.XmlDom " );
                xmlDom.loadXML(returnStr);
                

                //Table :返回的XML根节点(如果不知道,可以alert(responseText)看看...)
                var newsItems = xmlDom.getElementsByTagName( " Table " );
                 /*
                将城市的下拉列表清空

                 */
                document.getElementById( " drpCity " ).length = 0 ;
                //循环获取多少条记录
                 for (var i = 0 ;i < newsItems.length;i ++ )
                {
                    var newsItem  =  newsItems[i];                                                                                   
                    var strID  =  newsItem.getElementsByTagName( " id " )[ 0 ].text;
                    var strCity  =  newsItem.getElementsByTagName( " city " )[ 0 ].text;
                    
                     // debugger;

                    //将获取的记录填充到城市的下拉列表中
                    document.all( " drpCity " ).options.add( new  Option(strCity,strID));
                }
            }

            function Cbo_Error()
            {
                alert(responseText);
            }

         </ script >
     </ HEAD >
     < body >
         < form id = " Form1 "  method = " post "  runat = " server " >
             < asp:Label id = " lbl_Province "  runat = " server " > 省份: </ asp:Label >
             < asp:DropDownList id = " drpProvince "  runat = " server "  Width = " 128px " ></ asp:DropDownList >
             < asp:Label id = " lbl_city "  runat = " server " > 城市: </ asp:Label >
             < asp:DropDownList id = " drpCity "  runat = " server "  Width = " 144px " ></ asp:DropDownList >
         </ form >
     </ body >
</ HTML >

 

ASPX页面: MyDropDownList.aspx .cs(主要是先绑定省份的下拉列表),代码如下

 

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Drawing;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;

using System.Data.SqlClient;

using  AjaxFrmClass.Class;

namespace  AjaxFrmClass.MyDropDownList
{
     ///   <summary>
     ///  MyDropDownList 的摘要说明。
     ///   </summary>
     public   class  MyDropDownList : System.Web.UI.Page
    {
         protected  System.Web.UI.WebControls.Label lbl_city;
         protected  System.Web.UI.WebControls.DropDownList drpCity;
         protected  System.Web.UI.WebControls.Label lbl_Province;
         protected  System.Web.UI.WebControls.DropDownList drpProvince;
        
    
         private   void  Page_Load( object  sender, System.EventArgs e)
        {
             if ( ! IsPostBack)
            {
                 // 调用客户端的方法
                 this .drpProvince.Attributes.Add( " onchange " , " ChooseCity() " );
                //绑定省份

                 this .ProvinceBind();
            }
        }



         ///   <summary>
         ///  省份绑定
         ///   </summary>
         public   void   ProvinceBind()
        {
            
            SqlConnection con  =   new  SqlConnection( " uid=sa;pwd=1234;database=MyAjaxDB " );
            SqlCommand  cmd  =   new  SqlCommand( " select ProvinceID,Province from Province order by ProvinceID asc " ,con);
            con.Open();
            
            SqlDataAdapter MySqlAdapter  =   new  SqlDataAdapter(cmd);
            DataSet MyDataSet   =   new   DataSet();
 
            MySqlAdapter.Fill(MyDataSet, " Province  " );

                                                     
             this .drpProvince.DataSource  =  MyDataSet;
             this .drpProvince.DataTextField   =   " Province " ;
             this .drpProvince.DataValueField  =   " ProvinceID " ;
             this .drpProvince.DataBind();
                
             this .drpProvince.Items.Insert( 0 , new  ListItem( " 请选择 " , " ... " ));
        }

         #region  Web 窗体设计器生成的代码
         override   protected   void  OnInit(EventArgs e)
        {
             //
             //  CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
             //
            InitializeComponent();
             base .OnInit(e);
        }
        
         ///   <summary>
         ///  设计器支持所需的方法 - 不要使用代码编辑器修改
         ///  此方法的内容。
         ///   </summary>
         private   void  InitializeComponent()
        {    
             this .Load  +=   new  System.EventHandler( this .Page_Load);

        }
         #endregion
    }
}

 

页面:Ajax.aspx; 前台(.aspx)不需要操作,Ajax.aspx.cs: 代码如下

 

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Drawing;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;
using  System.Data.SqlClient;

namespace  AjaxFrmClass.MyDropDownList
{
    /// <summary>
     ///  Ajax 的摘要说明。
    /// </summary>
    public class  Ajax : System.Web.UI.Page
    {
        protected  SqlDataAdapter MyDataAdapter ;
        protected  SqlDataAdapter MyDataSet;
                                           
        private void Page_Load(object  sender, System.EventArgs e)
        {
        
            if(! IsPostBack)
            {
                string ProvinceID = Request["ProvinceID" ].ToString();
                if (ProvinceID.Length > 0 ) 
                {
                    Response.Clear();
                                            

                   SqlConnection con = new SqlConnection("uid=sa;pwd=1234;database=MyAjaxDB" );

                    MyDataAdapter 

                    MyDataSet  = new  DataSet();
                    MyDataAdapter.Fill(MyDataSet);

                     string chString =  MyDataSet.GetXml();

                    Response.Clear();
                    Response.ContentType = "text/xml" ;
                    
                    Response.Write(chString);
                    Response.End();
                }
                else
                {
                    Response.Clear();
                    Response.End();
                }    
            }
             else
            {
                Response.Clear();
                Response.End();
            }
        }

         #region Web 窗体设计器生成的代码
         override protected void  OnInit(EventArgs e)
        {
            //
             //  CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
             //
            InitializeComponent();
            base .OnInit(e);
        }
        
        /// <summary>
         ///  设计器支持所需的方法 - 不要使用代码编辑器修改
        ///  此方法的内容。
        /// </summary>
        private void  InitializeComponent()
        {    
            this.Load += new System.EventHandler(this .Page_Load);

        }
        #endregion
    }
}

= new SqlDataAdapter("select * from city where father ='"+ProvinceID+"'",con);

 

数据库: 省份表和城市表(作为文本文档导入表中即可)

 省份: 表名 province

   id  provinceID  province
    1    110000    北京市
    2    120000    天津市
    3    130000    河北省
    4    140000    山西省
    5    150000    内蒙古自治区
    6    210000    辽宁省
    7    220000    吉林省
    8    230000    黑龙江省
    9    310000    上海市
    10    320000    江苏省
    11    330000    浙江省
    12    340000    安徽省
    13    350000    福建省
    14    360000    江西省
    15    370000    山东省
    16    410000    河南省
    17    420000    湖北省
    18    430000    湖南省
    19    440000    广东省
    20    450000    广西壮族自治区
    21    460000    海南省
    22    500000    重庆市
    23    510000    四川省
    24    520000    贵州省
    25    530000    云南省
    26    540000    西藏自治区
    27    610000    陕西省
    28    620000    甘肃省
    29    630000    青海省
    30    640000    宁夏回族自治区
    31    650000    新疆维吾尔自治区
    32    710000    台湾省
    33    810000    香港特别行政区
    34    820000    澳门特别行政区
            

 城市表:表名 city

    id    cityID     city    father
    1    110100    市辖区    110000
     2    110200    县    110000
     3    120100    市辖区    120000
     4    120200    县    120000
     5    130100    石家庄市    130000
     6    130200    唐山市    130000
     7    130300    秦皇岛市    130000
     8    130400    邯郸市    130000
     9    130500    邢台市    130000
     10    130600    保定市    130000
     11    130700    张家口市    130000
     12    130800    承德市    130000
     13    130900    沧州市    130000
     14    131000    廊坊市    130000
     15    131100    衡水市    130000
     16    140100    太原市    140000
     17    140200    大同市    140000
     18    140300    阳泉市    140000
     19    140400    长治市    140000
     20    140500    晋城市    140000
     21    140600    朔州市    140000
     22    140700    晋中市    140000
     23    140800    运城市    140000
     24    140900    忻州市    140000
     25    141000    临汾市    140000
     26    141100    吕梁市    140000
     27    150100    呼和浩特市    150000
     28    150200    包头市    150000
     29    150300    乌海市    150000
     30    150400    赤峰市    150000
     31    150500    通辽市    150000
     32    150600    鄂尔多斯市    150000
     33    150700    呼伦贝尔市    150000
     34    150800    巴彦淖尔市    150000
     35    150900    乌兰察布市    150000
     36    152200    兴安盟    150000
     37    152500    锡林郭勒盟    150000
     38    152900    阿拉善盟    150000
     39    210100    沈阳市    210000
     40    210200    大连市    210000
     41    210300    鞍山市    210000
     42    210400    抚顺市    210000
     43    210500    本溪市    210000
     44    210600    丹东市    210000
     45    210700    锦州市    210000
     46    210800    营口市    210000
     47    210900    阜新市    210000
     48    211000    辽阳市    210000
     49    211100    盘锦市    210000
     50    211200    铁岭市    210000
     51    211300    朝阳市    210000
     52    211400    葫芦岛市    210000
     53    220100    长春市    220000
     54    220200    吉林市    220000
     55    220300    四平市    220000
     56    220400    辽源市    220000
     57    220500    通化市    220000
     58    220600    白山市    220000
     59    220700    松原市    220000
     60    220800    白城市    220000
     61    222400    延边朝鲜族自治州    220000
     62    230100    哈尔滨市    230000
     63    230200    齐齐哈尔市    230000
     64    230300    鸡西市    230000
     65    230400    鹤岗市    230000
     66    230500    双鸭山市    230000
     67    230600    大庆市    230000
     68    230700    伊春市    230000
     69    230800    佳木斯市    230000
     70    230900    七台河市    230000
     71    231000    牡丹江市    230000
     72    231100    黑河市    230000
     73    231200    绥化市    230000
     74    232700    大兴安岭地区    230000
     75    310100    市辖区    310000
     76    310200    县    310000
     77    320100    南京市    320000
     78    320200    无锡市    320000
     79    320300    徐州市    320000
     80    320400    常州市    320000
     81    320500    苏州市    320000
     82    320600    南通市    320000
     83    320700    连云港市    320000
     84    320800    淮安市    320000
     85    320900    盐城市    320000
     86    321000    扬州市    320000
     87    321100    镇江市    320000
     88    321200    泰州市    320000
     89    321300    宿迁市    320000
     90    330100    杭州市    330000
     91    330200    宁波市    330000
     92    330300    温州市    330000
     93    330400    嘉兴市    330000
     94    330500    湖州市    330000
     95    330600    绍兴市    330000
     96    330700    金华市    330000
     97    330800    衢州市    330000
     98    330900    舟山市    330000
     99    331000    台州市    330000
     100    331100    丽水市    330000
     101    340100    合肥市    340000
     102    340200    芜湖市    340000
     103    340300    蚌埠市    340000
     104    340400    淮南市    340000
     105    340500    马鞍山市    340000
     106    340600    淮北市    340000
     107    340700    铜陵市    340000
     108    340800    安庆市    340000
     109    341000    黄山市    340000
     110    341100    滁州市    340000
     111    341200    阜阳市    340000
     112    341300    宿州市    340000
     113    341400    巢湖市    340000
     114    341500    六安市    340000
     115    341600    亳州市    340000
     116    341700    池州市    340000
     117    341800    宣城市    340000
     118    350100    福州市    350000
     119    350200    厦门市    350000
     120    350300    莆田市    350000
     121    350400    三明市    350000
     122    350500    泉州市    350000
     123    350600    漳州市    350000
     124    350700    南平市    350000
     125    350800    龙岩市    350000
     126    350900    宁德市    350000
     127    360100    南昌市    360000
     128    360200    景德镇市    360000
     129    360300    萍乡市    360000
     130    360400    九江市    360000
     131    360500    新余市    360000
     132    360600    鹰潭市    360000
     133    360700    赣州市    360000
     134    360800    吉安市    360000
     135    360900    宜春市    360000
     136    361000    抚州市    360000
     137    361100    上饶市    360000
     138    370100    济南市    370000
     139    370200    青岛市    370000
     140    370300    淄博市    370000
     141    370400    枣庄市    370000
     142    370500    东营市    370000
     143    370600    烟台市    370000
     144    370700    潍坊市    370000
     145    370800    济宁市    370000
     146    370900    泰安市    370000
     147    371000    威海市    370000
     148    371100    日照市    370000
     149    371200    莱芜市    370000
     150    371300    临沂市    370000
     151    371400    德州市    370000
     152    371500    聊城市    370000
     153    371600    滨州市    370000
     154    371700    荷泽市    370000
     155    410100    郑州市    410000
     156    410200    开封市    410000
     157    410300    洛阳市    410000
     158    410400    平顶山市    410000
     159    410500    安阳市    410000
     160    410600    鹤壁市    410000
     161    410700    新乡市    410000
     162    410800    焦作市    410000
     163    410900    濮阳市    410000
     164    411000    许昌市    410000
     165    411100    漯河市    410000
     166    411200    三门峡市    410000
     167    411300    南阳市    410000
     168    411400    商丘市    410000
     169    411500    信阳市    410000
     170    411600    周口市    410000
     171    411700    驻马店市    410000
     172    420100    武汉市    420000
     173    420200    黄石市    420000
     174    420300    十堰市    420000
     175    420500    宜昌市    420000
     176    420600    襄樊市    420000
     177    420700    鄂州市    420000
     178    420800    荆门市    420000
     179    420900    孝感市    420000
     180    421000    荆州市    420000
     181    421100    黄冈市    420000
     182    421200    咸宁市    420000
     183    421300    随州市    420000
     184    422800    恩施土家族苗族自治州    420000
     185    429000    省直辖行政单位    420000
     186    430100    长沙市    430000
     187    430200    株洲市    430000
     188    430300    湘潭市    430000
     189    430400    衡阳市    430000
     190    430500    邵阳市    430000
     191    430600    岳阳市    430000
     192    430700    常德市    430000
     193    430800    张家界市    430000
     194    430900    益阳市    430000
     195    431000    郴州市    430000
     196    431100    永州市    430000
     197    431200    怀化市    430000
     198    431300    娄底市    430000
     199    433100    湘西土家族苗族自治州    430000
     200    440100    广州市    440000
     201    440200    韶关市    440000
     202    440300    深圳市    440000
     203    440400    珠海市    440000
     204    440500    汕头市    440000
     205    440600    佛山市    440000
     206    440700    江门市    440000
     207    440800    湛江市    440000
     208    440900    茂名市    440000
     209    441200    肇庆市    440000
     210    441300    惠州市    440000
     211    441400    梅州市    440000
     212    441500    汕尾市    440000
     213    441600    河源市    440000
     214    441700    阳江市    440000
     215    441800    清远市    440000
     216    441900    东莞市    440000
     217    442000    中山市    440000
     218    445100    潮州市    440000
     219    445200    揭阳市    440000
     220    445300    云浮市    440000
     221    450100    南宁市    450000
     222    450200    柳州市    450000
     223    450300    桂林市    450000
     224    450400    梧州市    450000
     225    450500    北海市    450000
     226    450600    防城港市    450000
     227    450700    钦州市    450000
     228    450800    贵港市    450000
     229    450900    玉林市    450000
     230    451000    百色市    450000
     231    451100    贺州市    450000
     232    451200    河池市    450000
     233    451300    来宾市    450000
     234    451400    崇左市    450000
     235    460100    海口市    460000
     236    460200    三亚市    460000
     237    469000    省直辖县级行政单位    460000
     238    500100    市辖区    500000
     239    500200    县    500000
     240    500300    市    500000
     241    510100    成都市    510000
     242    510300    自贡市    510000
     243    510400    攀枝花市    510000
     244    510500    泸州市    510000
     245    510600    德阳市    510000
     246    510700    绵阳市    510000
     247    510800    广元市    510000
     248    510900    遂宁市    510000
     249    511000    内江市    510000
     250    511100    乐山市    510000
     251    511300    南充市    510000
     252    511400    眉山市    510000
     253    511500    宜宾市    510000
     254    511600    广安市    510000
     255    511700    达州市    510000
     256    511800    雅安市    510000
     257    511900    巴中市    510000
     258    512000    资阳市    510000
     259    513200    阿坝藏族羌族自治州    510000
     260    513300    甘孜藏族自治州    510000
     261    513400    凉山彝族自治州    510000
     262    520100    贵阳市    520000
     263    520200    六盘水市    520000
     264    520300    遵义市    520000
     265    520400    安顺市    520000
     266    522200    铜仁地区    520000
     267    522300    黔西南布依族苗族自治州    520000
     268    522400    毕节地区    520000
     269    522600    黔东南苗族侗族自治州    520000
     270    522700    黔南布依族苗族自治州    520000
     271    530100    昆明市    530000
     272    530300    曲靖市    530000
     273    530400    玉溪市    530000
     274    530500    保山市    530000
     275    530600    昭通市    530000
     276    530700    丽江市    530000
     277    530800    思茅市    530000
     278    530900    临沧市    530000
     279    532300    楚雄彝族自治州    530000
     280    532500    红河哈尼族彝族自治州    530000
     281    532600    文山壮族苗族自治州    530000
     282    532800    西双版纳傣族自治州    530000
     283    532900    大理白族自治州    530000
     284    533100    德宏傣族景颇族自治州    530000
     285    533300    怒江傈僳族自治州    530000
     286    533400    迪庆藏族自治州    530000
     287    540100    拉萨市    540000
     288    542100    昌都地区    540000
     289    542200    山南地区    540000
     290    542300    日喀则地区    540000
     291    542400    那曲地区    540000
     292    542500    阿里地区    540000
     293    542600    林芝地区    540000
     294    610100    西安市    610000
     295    610200    铜川市    610000
     296    610300    宝鸡市    610000
     297    610400    咸阳市    610000
     298    610500    渭南市    610000
     299    610600    延安市    610000
     300    610700    汉中市    610000
     301    610800    榆林市    610000
     302    610900    安康市    610000
     303    611000    商洛市    610000
     304    620100    兰州市    620000
     305    620200    嘉峪关市    620000
     306    620300    金昌市    620000
     307    620400    白银市    620000
     308    620500    天水市    620000
     309    620600    武威市    620000
     310    620700    张掖市    620000
     311    620800    平凉市    620000
     312    620900    酒泉市    620000
     313    621000    庆阳市    620000
     314    621100    定西市    620000
     315    621200    陇南市    620000
     316    622900    临夏回族自治州    620000
     317    623000    甘南藏族自治州    620000
     318    630100    西宁市    630000
     319    632100    海东地区    630000
     320    632200    海北藏族自治州    630000
     321    632300    黄南藏族自治州    630000
     322    632500    海南藏族自治州    630000
     323    632600    果洛藏族自治州    630000
     324    632700    玉树藏族自治州    630000
     325    632800    海西蒙古族藏族自治州    630000
     326    640100    银川市    640000
     327    640200    石嘴山市    640000
     328    640300    吴忠市    640000
     329    640400    固原市    640000
     330    640500    中卫市    640000
     331    650100    乌鲁木齐市    650000
     332    650200    克拉玛依市    650000
     333    652100    吐鲁番地区    650000
     334    652200    哈密地区    650000
     335    652300    昌吉回族自治州    650000
     336    652700    博尔塔拉蒙古自治州    650000
     337    652800    巴音郭楞蒙古自治州    650000
     338    652900    阿克苏地区    650000
     339    653000    克孜勒苏柯尔克孜自治州    650000
     340    653100    喀什地区    650000
     341    653200    和田地区    650000
     342    654000    伊犁哈萨克自治州    650000
     343    654200    塔城地区    650000
     344    654300    阿勒泰地区    650000
     345    659000    省直辖行政单位    650000
                

 到这步就完成了,基本上没什么难度