偶听到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!
顺便也刚刚写的复制过来!
对于小数据可能体现不到分成小文件的优点,当遇上大量数据时,就知道好处了!
当有大量数据要加载到下拉列表,又是联动的,如根据省份加载地区市列表时,如果一次性将全部数据读取出来,可能会造成资源浪费,而且客户端响应也会相对缓慢。
解决大量数据联动下拉列表最好的最好办法当然是异步调用数据了!根据前一个地区的选择项加载下级地区下拉列表项。
常看要网友求全国省市联动菜单(真懒,只会求,就不会自己写一下-__-!!),偶就当一回好人,写了一个。
省市数据是从网上获取的,不敢保证数据的准确性和完整性,请网友们提出有误之处,大家共同完善之!
数据条目详情如下:
共有 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 >
© 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 >
<! 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 >
© 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() + ".";
}
}
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() + ".";
}
}