ajax如何实现无刷新省市县三级联动

这篇文章主要介绍“ajax如何实现无刷新省市县三级联动”，在日常操作中，相信很多人在ajax如何实现无刷新省市县三级联动问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”ajax如何实现无刷新省市县三级联动”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

效果图：

实现代码：

1、html：

select
{
width:150px;
}



$(function(){
$.ajax({
type:"post",
contentType:"application/json",
url:"WebService1.asmx/GetProvince",
data:"{}",
success:function(result){
varstroption='';
for(vari=0;i';
stroption+=result.d[i].provincename;
stroption+='';
}
$('#seprovince').append(stroption);
}
})


$('#seprovince').change(function(){
$('#secityoption:gt(0)').remove();
$('#seareaoption:gt(0)').remove();

$.ajax({
type:"post",
contentType:"application/json",
url:"WebService1.asmx/GetCItyByPro",
data:"{proid:'"+$(this).val()+"'}",
success:function(result){
varstrocity='';
for(vari=0;i';
strocity+=result.d[i].cityname;
strocity+='';
}
$('#secity').append(strocity);
}
})
})


$('#secity').change(function(){
$('#seareaoption:gt(0)').remove();
$.ajax({
type:"post",
contentType:"application/json",
url:"WebService1.asmx/GetAreaByCity",
data:"{cityid:'"+$(this).val()+"'}",
success:function(result){
varstroarea='';
for(vari=0;i';
stroarea+=result.d[i].areaname;
stroarea+='';
}
$('#searea').append(stroarea);
}
})
})
})






用户名







密码







确认密码







邮箱







地址



--请选择--

省

--请选择--
市

--请选择--
县

2、WebService1.asmx

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Services;


namespace省市县三级联动
{
///

///WebService1的摘要说明
///
[WebService(Namespace="http://tempuri.org/")]
[WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
//若要允许使用ASP.NETAJAX从脚本中调用此Web服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
publicclassWebService1:System.Web.Services.WebService
{


[WebMethod]
publicstringHelloWorld()
{
return"HelloWorld";
}
[WebMethod]
publicListGetProvince()
{
BLL.provincebpro=newBLL.province();
Listlist=bpro.GetListModel();
returnlist;
}
[WebMethod]
publicListGetCItyByPro(stringproid)
{
BLL.citybcity=newBLL.city();
Listlist=bcity.GetListModel("father='"+proid+"'");
returnlist;
}
[WebMethod]
publicListGetAreaByCity(stringcityid)
{
BLL.areabarea=newBLL.area();
Listlist=barea.GetListModel("father='"+cityid+"'");
returnlist;
}
}
}

在三层的Bll层中的city.cs和area.cs中分别添加以下属性

//city.cs：
publicListGetListModel(stringstrsql)
{
returndal.GetListModel(strsql);
}
//area.cs：
publicListGetListModel(stringstrsql)
{
returndal.GetListModel(strsql);
}

在三层的DAL层中的city.cs和area.cs中分别添加以下方法

//city.cs：
publicSystem.Collections.Generic.ListGetListModel(stringstrsql)
{
System.Collections.Generic.Listlist=newSystem.Collections.Generic.List();
DataTabledt=GetList(strsql).Tables[0];
foreach(DataRowrowindt.Rows)
{
Model.citymcity=newModel.city();
mcity.id=Convert.ToInt32(row["id"]);
mcity.cityID=row["cityID"].ToString();
mcity.cityname=row["cityname"].ToString();
list.Add(mcity);
}
returnlist;
}
//area.cs：
publicSystem.Collections.Generic.ListGetListModel(stringstrsql)
{
DataTabledt=GetList(strsql).Tables[0];
System.Collections.Generic.Listlist=newSystem.Collections.Generic.List();
foreach(DataRowrowindt.Rows)
{
Model.areamarea=newModel.area()
{
id=Convert.ToInt32(row["id"]),
areaID=row["areaID"].ToString(),
areaname=row["areaname"].ToString()
};
list.Add(marea);
}
returnlist;
}

到此，关于“ajax如何实现无刷新省市县三级联动”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注恰卡编程网网站，小编会继续努力为大家带来更多实用的文章！