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

tangjin

作者

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

效果图：

实现代码：

1、html：

<html>
<head>
<title></title>
<styletype="text/css">
select
{
width:150px;
}
</style>
<scriptsrc="js/Jquery1.7.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
$.ajax({
type:"post",
contentType:"application/json",
url:"WebService1.asmx/GetProvince",
data:"{}",
success:function(result){
varstroption='';
for(vari=0;i<result.d.length;i++){
stroption+='<optionvalue='+result.d[i].provinceID+'>';
stroption+=result.d[i].provincename;
stroption+='</option>';
}
$('#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<result.d.length;i++){
strocity+='<optionvalue='+result.d[i].cityID+'>';
strocity+=result.d[i].cityname;
strocity+='</option>';
}
$('#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<result.d.length;i++){
stroarea+='<optionvalue='+result.d[i].areaID+'>';
stroarea+=result.d[i].areaname;
stroarea+='</option>';
}
$('#searea').append(stroarea);
}
})
})
})
</script>
</head>
<body>
<table>
<tr>
<td>
用户名
</td>
<td>
<inputid="Text1"type="text"/>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<inputid="Text2"type="text"/>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<inputid="Text3"type="text"/>
</td>
</tr>
<tr>
<td>
邮箱
</td>
<td>
<inputid="Text4"type="text"/>
</td>
</tr>
<tr>
<td>
地址
</td>
<td>
<selectid="seprovince">
<option>--请选择--</option>
</select>
省
<selectid="secity">
<option>--请选择--</option>
</select>市
<selectid="searea">
<option>--请选择--</option>
</select>县
</td>
</tr>
</table>
</body>
</html>

2、WebService1.asmx

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


namespace省市县三级联动
{
///<summary>
///WebService1的摘要说明
///</summary>
[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]
publicList<Model.province>GetProvince()
{
BLL.provincebpro=newBLL.province();
List<Model.province>list=bpro.GetListModel();
returnlist;
}
[WebMethod]
publicList<Model.city>GetCItyByPro(stringproid)
{
BLL.citybcity=newBLL.city();
List<Model.city>list=bcity.GetListModel("father='"+proid+"'");
returnlist;
}
[WebMethod]
publicList<Model.area>GetAreaByCity(stringcityid)
{
BLL.areabarea=newBLL.area();
List<Model.area>list=barea.GetListModel("father='"+cityid+"'");
returnlist;
}
}
}

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

//city.cs：
publicList<Model.city>GetListModel(stringstrsql)
{
returndal.GetListModel(strsql);
}
//area.cs：
publicList<Model.area>GetListModel(stringstrsql)
{
returndal.GetListModel(strsql);
}

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

//city.cs：
publicSystem.Collections.Generic.List<Model.city>GetListModel(stringstrsql)
{
System.Collections.Generic.List<Model.city>list=newSystem.Collections.Generic.List<Model.city>();
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.List<Model.area>GetListModel(stringstrsql)
{
DataTabledt=GetList(strsql).Tables[0];
System.Collections.Generic.List<Model.area>list=newSystem.Collections.Generic.List<Model.area>();
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如何实现无刷新省市县三级联动”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注恰卡编程网网站，小编会继续努力为大家带来更多实用的文章！

阅读全文

发布于 2021-03-13 15:42:35

ajax