示例将js代码放在city-load.js文件中,调用方便,只需要引入city-load.js,然后给cityLoader指定参数并调用init()
即可,通过cityLoader的result属性获取用户选择的地区信息,
如
var c=new cityLoader();
c.init();
var cityName=c.cname;//获取选择的城市名称
该示例采用ajax调用ashx文件获取地区Json数据,ashx文件需进行相应修改
getCityData.ashx文件代码如下,
//
//生成的格式:[{id:id,name:name},{id:id,name:name}]
//
public class GetCityDataHandler : IHttpHandler
{
#region IHttpHandler 成员
public bool IsReusable
{
get { throw new NotImplementedException(); }
}
/// <summary>
///返回json数据
/// </summary>
/// <param name="context"></param>
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/javascript";
string _returnContent = "[]";
string[] args = context.Request["args"].Trim().Split(',');
switch (args[0].ToLower())
{
case "getprovince":
_returnContent=GetProvince(args[1]);
break;
case "getcity":
_returnContent=GetCity(args[1]);
break;
case "getarea":
_returnContent = GetArea(args[1], args[2]);
break;
}
context.Response.Write(_returnContent);
}
#endregion
private string GetProvince(string positionID)
{
//extension
//positionID in ( south,north,west,east)
StringBuilder sb = new StringBuilder(500);
sb.Append("[");
DataTable da = CommonService.pro().prov();
foreach(DataRow dr in da.Rows)
{
sb.Append("{id:'").Append(dr["proID"]).Append("',name:'").Append(dr["proName"]).Append("'}");
if (dr != da.Rows[da.Rows.Count - 1])
sb.Append(",");
}
sb.Append("]");
return sb.ToString();
}
private string GetCity(string provinceID)
{
StringBuilder sb = new StringBuilder(500);
DataTable da;
sb.Append("[");
if (!String.IsNullOrEmpty(provinceID))
{
int pid = 0;
int.TryParse(provinceID, out pid);
da = CommonService.city().city(pid);
}
else
{
da = CommonService.city().citys();
}
foreach(DataRow dr in da.Rows)
{
sb.Append("{id:'").Append(dr["CityID"]).Append("',name:'").Append(dr["CityName"])
.Append("'}");
if (dr !=da.Rows[da.Rows.Count-1])
sb.Append(",");
}
sb.Append("]");
return sb.ToString();
}
private string GetArea(string provinceID, string cityID)
{
StringBuilder sb = new StringBuilder(500);
sb.Append("[");
DataTable da = CommonService.district().dis(Convert.ToInt32(cityID));
foreach (DataRow dr in da.Rows)
{
sb.Append("{id:'").Append(dr["ID"]).Append("',name:'").Append(dr["DisName"])
.Append("'}");
if (dr != da.Rows[da.Rows.Count - 1])
sb.Append(",");
}
sb.Append("]");
return sb.ToString();
}
}
我们通过ajax请求getcitydata.ashx?args=getcity,1就可以获取省份ID为1的城市数据
以下为city-load.js的源码:
/**********************************
* FILE : city-load.js
* AUTHOR:HUISHI newmin
*********************************/
function cityLoader(data){
//data format:{pe:*,ce:*,ae:*,func}
//pe:province element
//ce:city element
//ae:area element
this.pe=data.pe;
this.ce=data.ce;
this.ae=data.ae;
this.func=data.func;
this.elemErr=false;
if(!this.pe||!this.ce||!this.ae){
this.elemErr=true;return false;
}
if(!this.pe.nodeName==this.ce.nodeName==this.ae.nodeName=="SELECT"){
this.elemErr=true;return false;
}
}
cityLoader.prototype.result=null;
cityLoader.prototype.init=function(){
if(this.elemErr){
alert('Error:elements must be "SELECT"!');
}
else{
//加载城市
this.loadProvinces();
//绑定事件
var _t=this;
this.pe.onchange=function(){
if(this.selectedIndex!=-1){
_t.loadCitys(this.options[this.selectedIndex]);
}
}
this.ce.onchange=function(){
//为城市下拉框附加事件
if(this.selectedIndex!=-1)
_t.loadAreas(_t.pe.options[_t.pe.selectedIndex],this.options[this.selectedIndex]);
}
this.ae.onchange=function(){
_t.result={
pid:_t.pe.options[_t.pe.selectedIndex].value,
pname:_t.pe.options[_t.pe.selectedIndex].innerHTML,
cid:_t.ce.options[_t.ce.selectedIndex].value,
cname:_t.ce.options[_t.ce.selectedIndex].innerHTML,
aid:_t.ae.options[_t.ae.selectedIndex].value,
aname:_t.ae.options[_t.ae.selectedIndex].innerHTML
};
if(_t.func)
_t.func(_t.result);
}
}
}
//将返回的json数据以option填充到elem中
cityLoader.prototype.fill=function(elem,data){
elem.innerHTML="";
var opt=document.createElement("option");
opt.setAttribute("value","0");
opt.innerHTML="--请选择--";
elem.appendChild(opt);
for(var i in data){
var opt=document.createElement("option");
opt.setAttribute("value",data[i].id);
opt.innerHTML=data[i].name;
elem.appendChild(opt);
}
}
cityLoader.prototype.loadProvinces=function(){
var _t=this;
j.ajax.post("/dynamic/getcitydata.ashx","args=getprovince,0,0,0",
function(x){_t.fill(_t.pe,eval(x));});
}
cityLoader.prototype.loadCitys=function(province){
var _t=this;
j.ajax.post("/dynamic/getcitydata.ashx","args=getcity,"+province.value+",0",
function(x){_t.fill(_t.ce,eval(x));});
}
cityLoader.prototype.loadAreas=function(province,city){
var _t=this;
j.ajax.post("/dynamic/getcitydata.ashx","args=getarea,"+province.value+","+city.value,
function(x){_t.fill(_t.ae,eval(x));});
}
东方网新,为您提供专业的网站建设,软件开发,网络营销SEO,网络推广服务,代理国外主机空间,域名注册,服务热线:(+86)18608275575,电子邮件:master#atnet.cc;欢迎您访问东方网新网站:www.atnet.cc
在你放置地区选择控件的页面创建一个cityLoader对象，代码如下:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>地区选择Demo By Newmin www.atnet.cc</title>
<script type="text/javascript" src="/scripts/my-global.js"></script>
<script type="text/javascript" src="/scripts/my-plus.js"></script>
<script type="text/javascript" src="/scripts/city-load.js"></script>
<script>
var pe=ce=ae=null; //pe:province select element
var c;
window.onload=function(){
pe=j.$("province");
ce=j.$("city");
ae=j.$("area");
var c=new cityLoader({pe:pe,ce:ce,ae:ae,
func:function(x){alert("你选择的城市是:"+x.cname);}
});
c.init();
}
</script>
</head>
<body>
<select >--请选择--</option></select>省
<select >--请选择--</option></select>市
<select >--请选择--</option></select>区
</body>
</html>
Demo代码下载(还未上传)