现在的位置: 首页 > 综合 > 正文

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

2013年10月13日 ⁄ 综合 ⁄ 共 4545字 ⁄ 字号 评论关闭
对于小数据可能体现不到分成小文件的优点,当遇上大量数据时,就知道好处了!

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

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

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

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

数据条目详情如下:
共有 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: 
<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() + ".";
    }
}

 

抱歉!评论已关闭.