程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> .NET實例教程 >> 全國各省市聯動下拉列表(異步動態加載)

全國各省市聯動下拉列表(異步動態加載)

編輯:.NET實例教程

偶聽到CSDN寫文章可以換C幣,有了C幣就可以換書,HOHO~~偶以後就不去博客園文章了^^
順便也剛剛寫的復制過來!

對於小數據可能體現不到分成小文件的優點,當遇上大量數據時,就知道好處了!

當有大量數據要加載到下拉列表,又是聯動的,如根據省份加載地區市列表時,如果一次性將全部數據讀取出來,可能會造成資源浪費,而且客戶端響應也會相對緩慢。

解決大量數據聯動下拉列表最好的最好辦法當然是異步調用數據了!根據前一個地區的選擇項加載下級地區下拉列表項。

常看要網友求全國省市聯動菜單(真懶,只會求,就不會自己寫一下-__-!!),偶就當一回好人,寫了一個。

省市數據是從網上獲取的,不敢保證數據的准確性和完整性,請網友們提出有誤之處,大家共同完善之!

數據條目詳情如下:
共有 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;
            }
        }
    }
}

//當改變省列表選擇項時
funct

-

ion 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() + ".";
    }
}

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved