使用三层实现省市县三级联动(利用ajax实现无刷新效果)

前端之家收集整理的这篇文章主要介绍了使用三层实现省市县三级联动(利用ajax实现无刷新效果)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

首页

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Webjax.aspx.cs" Inherits="sanjiliandong.Webjax" %>

<!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>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/GetListPro",
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>';
}
$('#SePro').append(stroption);
}
})
$("#SePro").change(function () {
$("#SeCity option:gt(0)").remove();
$.ajax({
type: "post",
url: "WebService1.asmx/GetListCity",
data: "{proid:'" + $('#SePro').val() + "'}",
success: function (result) {
var stroption = '';
for (var i = 0; i < result.d.length; i++) {
stroption += '<option value=' + result.d[i].cityID + '>';
stroption += result.d[i].cityname;
stroption += '</option>';
}
$('#SeCity').append(stroption);
}
})

})

$("#SeCity").change(function () {
$("#SeArea option:gt(0)").remove();
$.ajax({
type: "post",
url: "WebService1.asmx/GetListArea",
data: "{areaid:'" + $('#SeCity').val() + "'}",
success: function (result) {
var stroption = '';
for (var i = 0; i < result.d.length; i++) {
stroption += '<option value=' + result.d[i].areaID + '>';
stroption += result.d[i].areaname;
stroption += '</option>';
}
$('#SeArea').append(stroption);
}
})
})


})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id="SePro">
<option>--请选择--</option>
</select>
<select id="SeCity">
<option>--请选择--</option>
</select>
<select id="SeArea">
<option>--请选择--</option>
</select>

</div>
</form>
</body>
</html>
WebService1.asmx后台

public List<Model.province> GetListPro()
{
BLL.province pro = new BLL.province();
List<Model.province> listpro= pro.GetListModel();
return listpro;
}
[WebMethod]
public List<Model.city> GetListCity(string proid)
{
BLL.city city = new BLL.city();
List<Model.city> listcity = city.GetListModel("father='" + proid + "'");
return listcity;
}
[WebMethod]
public List<Model.area> GetListArea(string areaid)
{
BLL.area area = new BLL.area();
List<Model.area> listcity = area.GetListModel("father='" + areaid + "'");
return listcity;
}

DAL中:

province.cs

public System.Collections.Generic.List<Model.province> GetListModel()
{
System.Collections.Generic.List<Model.province> list = new System.Collections.Generic.List<Model.province>();
DataTable dt = GetList("").Tables[0];
foreach (DataRow row in dt.Rows)
{
Model.province mpro = new Model.province();
mpro.id = Convert.ToInt32(row["id"]);
mpro.provinceID = row["provinceID"].ToString();
mpro.provincename = row["provincename"].ToString();
list.Add(mpro);
}
return list;

}

public System.Collections.Generic.List<Model.city> GetListModel(string proid)
{
List<Model.city> list = new List<Model.city>();
DataTable dt = GetList(proid).Tables[0];
foreach(DataRow row in dt.Rows)
{
Model.city city = new Model.city();
city.id = Convert.ToInt32(row["id"]);
city.cityID = row["cityID"].ToString();
city.cityname = row["cityname"].ToString();
list.Add(city);
}
return list;
}

public System.Collections.Generic.List<Model.area> GetListModel(string areaid) { DataTable dt = GetList(areaid).Tables[0]; List<Model.area> list = new List<Model.area>(); foreach(DataRow row in dt.Rows) { Model.area area = new Model.area(); area.id= Convert.ToInt32(row["id"]); area.areaID = row["areaID"].ToString(); area.areaname = row["areaname"].ToString(); list.Add(area); } return list; }

原文链接:https://www.f2er.com/ajax/166333.html

猜你在找的Ajax相关文章