全国各省市联动下拉列表（异步动态加载）

对于小数据可能体现不到分成小文件的优点，当遇上大量数据时，就知道好处了！

当有大量数据要加载到下拉列表，又是联动的，如根据省份加载地区市列表时，如果一次性将全部数据读取出来，可能会造成资源浪费，而且客户端响应也会相对缓慢。

解决大量数据联动下拉列表最好的最好办法当然是异步调用数据了！根据前一个地区的选择项加载下级地区下拉列表项。

常看要网友求全国省市联动菜单（真懒，只会求，就不会自己写一下-__-!!），偶就当一回好人，写了一个。

省市数据是从网上获取的，不敢保证数据的准确性和完整性，请网友们提出有误之处，大家共同完善之！

数据条目详情如下：
共有 34 个省（包括自治区、直辖市、特别行政区）
共有 409 个市（区）

数据以 XML 文件保存，全国各省份集合和为每一个省创建一个 XML 文件，这样小文件在网络传输节省时间和资源。每一省份名都带有拼音综写，但市名没有，有需要的朋友可以自己去完善之。所有 XML 文档放在名为 Regions 的文件夹，方便管理。

所有文档和 JavaScript 都没有压缩，实际使用建议压缩一下，如将 XML 文件所有换行符去掉，JavaScript 注释去掉，不必要的换行符去掉等等。

代码和 XML 文档下载请到： http://www.fs2you.com/files/a1d84897-a7c4-11dc-8dcd-00142218fc6e/

话不多了，show DEMO code!

<% @ Page Language = " C# "  AutoEventWireup = " true "   CodeFile = " Default.aspx.cs "  Inherits = " _Default "   %>

<! 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 >

</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
     < h1 > http://www.code-studio.net </ h1 >
     &copy;  LikeCode 2007 < br  />
    Creative Commons Licenses:  < a  href ="http://creativecommons.org/licenses/by-nc-sa/3.0/" > Attribution-NonCommercial-ShareAlike </ a >< hr  />
         < input  name ="hdnPrtRegion"  type ="hidden"   />
         < input  name ="hdnChdRegion"  type ="hidden"   />
         < select  id ="listPrtRegions"  onclick ="listPrtRegions_Click()" ></ select >   < select  id ="listChdRegions"  onclick ="setSelectedItem('listChdRegions','hdnChdRegion')" ></ select >
         < asp:Button  ID ="Button1"  runat ="server"  Text ="偶就住在这里^^"  OnClick ="Button1_Click"   />
         < br  />
         < asp:Label  ID ="Label1"  runat ="server" ></ asp:Label ></ div >
     </ form >
</ body >
< script  type ="text/javascript" >
var  xh;

// 创建 XMLHttpRequest
function  crtRqt(){
     if (window.ActiveXObject)
        xh = new  ActiveXObject( " Microsoft.XMLHTTP " );
     else
        xh = new  XMLHttpRequest();
}

// 减少代码冗余
function  g(sElmId){
     return  document.getElementById(sElmId);
}

// 发送 Ajax 请求
function  sendAjaxRequest(sTargetUrl,oHdlFunc){
    crtRqt();
    xh.onreadystatechange = oHdlFunc;
    xh.open( " GET " ,sTargetUrl, true );
    xh.send( null );
}

// 初始化省(自治区,特别行政区)
function  initPrtRegions(){
     var  sTargetUrl = " Regions/regions.xml " ;
    sendAjaxRequest(sTargetUrl,hdlInitPrtRegions);
}

// AJAX 返回成功, 为列表增加选项
function  hdlInitPrtRegions(){
     if (xh.readyState == 4 ){
         if (xh.status == 200 ){
             var  oList = g( " listPrtRegions " );
             var  xmlDoc = xh.responseXML;
             var  regionsName = xmlDoc.getElementsByTagName( " name " );
             var  regionsShort = xmlDoc.getElementsByTagName( " short " );
            oList.options[ 0 ] = new  Option( " 请选择 " , "" );
             for ( var  i = 0 ;i != regionsName.length; ++ i){
                 var  oOpt = new  Option();
                oOpt.value = regionsShort[i].childNodes[ 0 ].nodeValue;
                oOpt.text = regionsName[i].childNodes[ 0 ].nodeValue;
                oList.options[i + 1 ] = oOpt;
            }
        }
    }
}

// 当改变省列表选择项时
function  listPrtRegions_Click(){
     var  oList = g( " listPrtRegions " );
     var  sSelectedValue = oList.options[oList.selectedIndex].value;
    setSelectedItem( " listPrtRegions " , " hdnPrtRegion " );
     if (sSelectedValue != null   &&  sSelectedValue != "" ){
         var  sTargetUrl = " Regions/ " + sSelectedValue + " .xml " ;
        sendAjaxRequest(sTargetUrl,hdlListChdRegions);
    }
}

// 处理市列表
function  hdlListChdRegions(){
     if (xh.readyState == 4 ){
         if (xh.status == 200 ){
             var  oList = g( " listChdRegions " );
             var  xmlDoc = xh.responseXML;
             var  regionsName = xmlDoc.getElementsByTagName( " region " );
            oList.options.length = 0 ;
            oList.options[ 0 ] = new  Option( " 请选择 " , "" );
             for ( var  i = 0 ;i != regionsName.length; ++ i){
                 var  oOpt = new  Option();
                oOpt.text = regionsName[i].childNodes[ 0 ].nodeValue;
                oList.options[i + 1 ] = oOpt;
            } 
        }
    }
}

// 保存已选择的地区名
function  setSelectedItem(sListName,sHdnName){
     var  oList = g(sListName);
     var  sSelectedText = oList.options[oList.selectedIndex].text;
    document.getElementsByName(sHdnName)[ 0 ].value = sSelectedText
}

initPrtRegions();
</ script >
</ html >

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "您选择的是: " + Request.Form["hdnPrtRegion"].ToString() 
                        + " - " + Request.Form["hdnChdRegion"].ToString() + ".";
    }
}