ajax实现无刷新省市县三级联动
程序员文章站
2022-05-26 09:54:56
本文实例为大家分享了ajax实现无刷新省市县三级联动的具体代码，供大家参考，具体内容如下
效果图：
实现代码：
1、html：
本文实例为大家分享了ajax实现无刷新省市县三级联动的具体代码，供大家参考，具体内容如下
效果图：
实现代码：
1、html：
<html>
<head>
<title></title>
<style type="text/css">
select
{
width: 150px;
}
</style>
<script src="js/jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "post",
contenttype: "application/json",
url: "webservice1.asmx/getprovince",
data: "{}",
success: function (result) {
var stroption = '';
for (var i = 0; i < result.d.length; i++) {
stroption += '<option value=' + result.d[i].provinceid + '>';
stroption += result.d[i].provincename;
stroption += '</option>';
}
$('#seprovince').append(stroption);
}
})
$('#seprovince').change(function () {
$('#secity option:gt(0)').remove();
$('#searea option:gt(0)').remove();
$.ajax({
type: "post",
contenttype: "application/json",
url: "webservice1.asmx/getcitybypro",
data: "{proid:'" + $(this).val() + "'}",
success: function (result) {
var strocity = '';
for (var i = 0; i < result.d.length; i++) {
strocity += '<option value=' + result.d[i].cityid + '>';
strocity += result.d[i].cityname;
strocity += '</option>';
}
$('#secity').append(strocity);
}
})
})
$('#secity').change(function () {
$('#searea option:gt(0)').remove();
$.ajax({
type: "post",
contenttype: "application/json",
url: "webservice1.asmx/getareabycity",
data: "{cityid:'" + $(this).val() + "'}",
success: function (result) {
var stroarea = '';
for (var i = 0; i < result.d.length; i++) {
stroarea += '<option value=' + result.d[i].areaid + '>';
stroarea += result.d[i].areaname;
stroarea += '</option>';
}
$('#searea').append(stroarea);
}
})
})
})
</script>
</head>
<body>
<table>
<tr>
<td>
用户名
</td>
<td>
<input id="text1" type="text" />
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input id="text2" type="text" />
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input id="text3" type="text" />
</td>
</tr>
<tr>
<td>
邮箱
</td>
<td>
<input id="text4" type="text" />
</td>
</tr>
<tr>
<td>
地址
</td>
<td>
<select id="seprovince">
<option>--请选择--</option>
</select>
省
<select id="secity">
<option>--请选择--</option>
</select>市
<select id="searea">
<option>--请选择--</option>
</select>县
</td>
</tr>
</table>
</body>
</html>
2、webservice1.asmx
using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.services;
namespace 省市县三级联动
{
/// <summary>
/// webservice1 的摘要说明
/// </summary>
[webservice(namespace = "http://tempuri.org/")]
[webservicebinding(conformsto = wsiprofiles.basicprofile1_1)]
[system.componentmodel.toolboxitem(false)]
// 若要允许使用 asp.net ajax 从脚本中调用此 web 服务，请取消对下行的注释。
[system.web.script.services.scriptservice]
public class webservice1 : system.web.services.webservice
{
[webmethod]
public string helloworld()
{
return "hello world";
}
[webmethod]
public list<model.province> getprovince()
{
bll.province bpro = new bll.province();
list<model.province> list = bpro.getlistmodel();
return list;
}
[webmethod]
public list<model.city> getcitybypro(string proid)
{
bll.city bcity = new bll.city();
list<model.city> list = bcity.getlistmodel("father='" + proid + "'");
return list;
}
[webmethod]
public list<model.area> getareabycity(string cityid)
{
bll.area barea = new bll.area();
list<model.area> list = barea.getlistmodel("father='" + cityid + "'");
return list;
}
}
}
在三层的bll层中的city.cs和area.cs中分别添加以下属性
//city.cs：
public list<model.city> getlistmodel(string strsql)
{
return dal.getlistmodel(strsql);
}
//area.cs：
public list<model.area> getlistmodel(string strsql)
{
return dal.getlistmodel(strsql);
}
在三层的dal层中的city.cs和area.cs中分别添加以下方法
//city.cs：
public system.collections.generic.list<model.city> getlistmodel(string strsql)
{
system.collections.generic.list<model.city> list = new system.collections.generic.list<model.city>();
datatable dt = getlist(strsql).tables[0];
foreach (datarow row in dt.rows)
{
model.city mcity = new model.city();
mcity.id = convert.toint32(row["id"]);
mcity.cityid = row["cityid"].tostring();
mcity.cityname = row["cityname"].tostring();
list.add(mcity);
}
return list;
}
//area.cs：
public system.collections.generic.list<model.area> getlistmodel(string strsql)
{
datatable dt = getlist(strsql).tables[0];
system.collections.generic.list<model.area> list = new system.collections.generic.list<model.area>();
foreach (datarow row in dt.rows)
{
model.area marea = new model.area()
{
id = convert.toint32(row["id"]),
areaid = row["areaid"].tostring(),
areaname = row["areaname"].tostring()
};
list.add(marea);
}
return list;
}
以上就是本文的全部内容，希望对大家的学习有所帮助。
下一篇： ajax无刷新分页的简单实现