loner_li AJax 无刷新 省市县三级联动（最终版）（webservice+三层）Html版和 有刷新的 web版 （2）
2013-05-22 20:34
211 查看
html前台
<html xmlns="http://www.w3.org/1999/xhtml">
<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 strpro;
for (var i = 0; i < result.d.length; i++) {
strpro += '<option value=' + result.d[i].provinceID + '>';
strpro += result.d[i].provincename + '</option>';
}
$('#sepro').append(strpro);
}
});
//以上为绑定省
//开始绑定市
$('#sepro').change(function () {
$('#secity option:gt(0)').remove();
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/GetCity",
data: "{proid:'" + $(this).val() + "'}",
success: function (result) {
var strcity;
for (var i = 0; i < result.d.length; i++) {
strcity += '<option value=' + result.d[i].cityID + '>';
strcity += result.d[i].cityname + '</option>';
}
$('#secity').append(strcity);
}
});
});
//以上为绑定市
//开始绑县
$('#secity').change(function () {
$('#searea option:gt(0)').remove();
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/GetArea",
data: "{cityid:'" + $(this).val() + "'}",
success: function (result) {
var strarea;
for (var i = 0; i < result.d.length; i++) {
strarea += '<option value=' + result.d[i].areaID + '>';
strarea += result.d[i].areaname + '</option>';
}
$('#searea').append(strarea);
}
});
})
})
</script>
</head>
<body>
<select id="sepro">
<option>------请选择----</option>
</select>省
<select id="secity">
<option>------请选择----</option>
</select>市
<select id="searea">
<option>------请选择----</option>
</select>县
</body>
</html>
WebService1.asmx
///////////////省 市 县
[WebMethod]
public List<AJaxStudy.Model.province> GetProvince()
{
AJaxStudy.BLL.province bpro = new AJaxStudy.BLL.province();
List<AJaxStudy.Model.province> list = bpro.GetListModel();
return list;
}
[WebMethod]
public List<AJaxStudy.Model.city> GetCity(string proid)
{
AJaxStudy.BLL.city bcity = new AJaxStudy.BLL.city();
List<AJaxStudy.Model.city> list = bcity.GetListModel("father='"+proid+"'");
return list;
}
[WebMethod]
public List<AJaxStudy.Model.area> GetArea(string cityid)
{
AJaxStudy.BLL.area barea = new AJaxStudy.BLL.area();
List<AJaxStudy.Model.area> list = barea.GetListModel("father='" + cityid + "'");
return list;
}
三层里边的方法
DAL
province.cs
//获取数据方法 model实体
public List<Model.province> GetListModel()
{
List<Model.province> list = new List<Model.province>();
DataTable dt=GetList("").Tables[0];
foreach (DataRow row in dt.Rows)
{
Model.province pro = new Model.province();
pro.id = Convert.ToInt32(row["id"]);
pro.provinceID = row["provinceID"].ToString();
pro.provincename = row["provincename"].ToString();
list.Add(pro);
}
return list;
}
city.cs
public List<Model.city> GetListModel(string cityid)
{
List<Model.city> list = new List<Model.city>();
DataTable dt = GetList(cityid).Tables[0];
foreach (DataRow row in dt.Rows)
{
Model.city cty = new Model.city();
cty.id = Convert.ToInt32(row["id"]);
cty.cityID = row["cityID"].ToString();
cty.cityname = row["cityname"].ToString();
list.Add(cty);
}
return list;
}
area.cs
public List<Model.area> GetListModel(string cityid)
{
List<Model.area> list = new List<Model.area>();
DataTable dt = GetList(cityid).Tables[0];
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;
}
GetList()方法
/// <summary>
/// 获得数据列表
/// </summary>
public DataSet GetList(string strWhere)
{
StringBuilder strSql=new StringBuilder();
strSql.Append("select id,areaID,areaname,father ");
strSql.Append(" FROM area ");
if(strWhere.Trim()!="")
{
strSql.Append(" where "+strWhere);
}
return DbHelperSQL.Query(strSql.ToString());
}
-----------------------------------三层 有刷新方法---------------------------------------------------
注意：AutoPostBack=“true”
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace AJaxPCA
{
public partial class pca : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
loadData();
}
}
private void loadData()
{
AJaxStudy.BLL.province bpro = new AJaxStudy.BLL.province();
DataSet ds= bpro.GetList("");
ddlpro.DataSource = ds.Tables[0];
ddlpro.DataTextField = "provincename";
ddlpro.DataValueField = "provinceID";
ddlpro.DataBind();
ddlpro.Items.Insert(0, new ListItem("--请选择--", "0"));
}
protected void ddlpro_SelectedIndexChanged(object sender, EventArgs e)
{
if (this.ddlarea.Items.Count>0)
{
this.ddlarea.Items.Clear();
ddlarea.Items.Insert(0, new ListItem("--请选择--", "0"));
}
string proid = this.ddlpro.SelectedItem.Value;
//Response.Write(proid);
AJaxStudy.BLL.city bcity = new AJaxStudy.BLL.city();
DataSet ds = bcity.GetList("father='"+proid+"'");
ddlcity.DataSource = ds.Tables[0];
ddlcity.DataTextField = "cityname";
ddlcity.DataValueField = "cityID";
ddlcity.DataBind();
ddlcity.Items.Insert(0, new ListItem("--请选择--", "0"));
//绑定默认显示的市级区划下面所有的县
string cityid = ds.Tables[0].Rows[0]["cityID"].ToString();
AJaxStudy.BLL.area baraer = new AJaxStudy.BLL.area();
DataTable dtarea = baraer.GetList("father='" + cityid + "'").Tables[0];
ddlarea.DataSource = dtarea;
ddlarea.DataTextField = "areaname";
ddlarea.DataValueField = "areaID";
ddlarea.DataBind();
ddlarea.Items.Insert(0, new ListItem("--请选择--", "0"));
}
protected void ddlcity_SelectedIndexChanged(object sender, EventArgs e)
{
string cid = this.ddlcity.SelectedItem.Value;
AJaxStudy.BLL.area barea = new AJaxStudy.BLL.area();
DataSet ds = barea.GetList("father='" + cid + "'");
ddlarea.DataSource = ds.Tables[0];
ddlarea.DataTextField = "areaname";
ddlarea.DataValueField = "areaID";
ddlarea.DataBind();
ddlarea.Items.Insert(0, new ListItem("--请选择--", "0"));
}
}
}
<html xmlns="http://www.w3.org/1999/xhtml">
<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 strpro;
for (var i = 0; i < result.d.length; i++) {
strpro += '<option value=' + result.d[i].provinceID + '>';
strpro += result.d[i].provincename + '</option>';
}
$('#sepro').append(strpro);
}
});
//以上为绑定省
//开始绑定市
$('#sepro').change(function () {
$('#secity option:gt(0)').remove();
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/GetCity",
data: "{proid:'" + $(this).val() + "'}",
success: function (result) {
var strcity;
for (var i = 0; i < result.d.length; i++) {
strcity += '<option value=' + result.d[i].cityID + '>';
strcity += result.d[i].cityname + '</option>';
}
$('#secity').append(strcity);
}
});
});
//以上为绑定市
//开始绑县
$('#secity').change(function () {
$('#searea option:gt(0)').remove();
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/GetArea",
data: "{cityid:'" + $(this).val() + "'}",
success: function (result) {
var strarea;
for (var i = 0; i < result.d.length; i++) {
strarea += '<option value=' + result.d[i].areaID + '>';
strarea += result.d[i].areaname + '</option>';
}
$('#searea').append(strarea);
}
});
})
})
</script>
</head>
<body>
<select id="sepro">
<option>------请选择----</option>
</select>省
<select id="secity">
<option>------请选择----</option>
</select>市
<select id="searea">
<option>------请选择----</option>
</select>县
</body>
</html>
WebService1.asmx
///////////////省 市 县
[WebMethod]
public List<AJaxStudy.Model.province> GetProvince()
{
AJaxStudy.BLL.province bpro = new AJaxStudy.BLL.province();
List<AJaxStudy.Model.province> list = bpro.GetListModel();
return list;
}
[WebMethod]
public List<AJaxStudy.Model.city> GetCity(string proid)
{
AJaxStudy.BLL.city bcity = new AJaxStudy.BLL.city();
List<AJaxStudy.Model.city> list = bcity.GetListModel("father='"+proid+"'");
return list;
}
[WebMethod]
public List<AJaxStudy.Model.area> GetArea(string cityid)
{
AJaxStudy.BLL.area barea = new AJaxStudy.BLL.area();
List<AJaxStudy.Model.area> list = barea.GetListModel("father='" + cityid + "'");
return list;
}
三层里边的方法
DAL
province.cs
//获取数据方法 model实体
public List<Model.province> GetListModel()
{
List<Model.province> list = new List<Model.province>();
DataTable dt=GetList("").Tables[0];
foreach (DataRow row in dt.Rows)
{
Model.province pro = new Model.province();
pro.id = Convert.ToInt32(row["id"]);
pro.provinceID = row["provinceID"].ToString();
pro.provincename = row["provincename"].ToString();
list.Add(pro);
}
return list;
}
city.cs
public List<Model.city> GetListModel(string cityid)
{
List<Model.city> list = new List<Model.city>();
DataTable dt = GetList(cityid).Tables[0];
foreach (DataRow row in dt.Rows)
{
Model.city cty = new Model.city();
cty.id = Convert.ToInt32(row["id"]);
cty.cityID = row["cityID"].ToString();
cty.cityname = row["cityname"].ToString();
list.Add(cty);
}
return list;
}
area.cs
public List<Model.area> GetListModel(string cityid)
{
List<Model.area> list = new List<Model.area>();
DataTable dt = GetList(cityid).Tables[0];
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;
}
GetList()方法
/// <summary>
/// 获得数据列表
/// </summary>
public DataSet GetList(string strWhere)
{
StringBuilder strSql=new StringBuilder();
strSql.Append("select id,areaID,areaname,father ");
strSql.Append(" FROM area ");
if(strWhere.Trim()!="")
{
strSql.Append(" where "+strWhere);
}
return DbHelperSQL.Query(strSql.ToString());
}
-----------------------------------三层 有刷新方法---------------------------------------------------
注意：AutoPostBack=“true”
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace AJaxPCA
{
public partial class pca : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
loadData();
}
}
private void loadData()
{
AJaxStudy.BLL.province bpro = new AJaxStudy.BLL.province();
DataSet ds= bpro.GetList("");
ddlpro.DataSource = ds.Tables[0];
ddlpro.DataTextField = "provincename";
ddlpro.DataValueField = "provinceID";
ddlpro.DataBind();
ddlpro.Items.Insert(0, new ListItem("--请选择--", "0"));
}
protected void ddlpro_SelectedIndexChanged(object sender, EventArgs e)
{
if (this.ddlarea.Items.Count>0)
{
this.ddlarea.Items.Clear();
ddlarea.Items.Insert(0, new ListItem("--请选择--", "0"));
}
string proid = this.ddlpro.SelectedItem.Value;
//Response.Write(proid);
AJaxStudy.BLL.city bcity = new AJaxStudy.BLL.city();
DataSet ds = bcity.GetList("father='"+proid+"'");
ddlcity.DataSource = ds.Tables[0];
ddlcity.DataTextField = "cityname";
ddlcity.DataValueField = "cityID";
ddlcity.DataBind();
ddlcity.Items.Insert(0, new ListItem("--请选择--", "0"));
//绑定默认显示的市级区划下面所有的县
string cityid = ds.Tables[0].Rows[0]["cityID"].ToString();
AJaxStudy.BLL.area baraer = new AJaxStudy.BLL.area();
DataTable dtarea = baraer.GetList("father='" + cityid + "'").Tables[0];
ddlarea.DataSource = dtarea;
ddlarea.DataTextField = "areaname";
ddlarea.DataValueField = "areaID";
ddlarea.DataBind();
ddlarea.Items.Insert(0, new ListItem("--请选择--", "0"));
}
protected void ddlcity_SelectedIndexChanged(object sender, EventArgs e)
{
string cid = this.ddlcity.SelectedItem.Value;
AJaxStudy.BLL.area barea = new AJaxStudy.BLL.area();
DataSet ds = barea.GetList("father='" + cid + "'");
ddlarea.DataSource = ds.Tables[0];
ddlarea.DataTextField = "areaname";
ddlarea.DataValueField = "areaID";
ddlarea.DataBind();
ddlarea.Items.Insert(0, new ListItem("--请选择--", "0"));
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- loner_li AJax 无刷新 省市县三级联动（webservice+sqlhelp）客户端控件版和 有刷新 web版
- 无刷新省市县三级联动(AJAX/Webservice)
- Ajax无刷新技术实现省市县三级联动下拉菜单--Asp.Net
- 省市县三级联动无刷新（附带数据sql）
- Ajax 实现省市县 三级联动【无刷新】三层 | 三级联动—有刷新
- Ajax无刷新技术实现省市县三级联动下拉菜单--Asp.Net
- JQuery+WebService实现DropDownlist无刷新三级联动
- 无刷新省市三级联动自定义组件代码
- 51aspx省市区县(含全国完整数据库)Ajax无刷新三级联动
- ajax实现无刷新省市县三级联动
- Ajax 实现省市县 三级联动【无刷新】三层 | 三级联动—有刷新
- 51aspx省市区县(含全国完整数据库)Ajax无刷新三级联动
- 用DropDownList实现Ajax无刷新省市三级联动中出现的错误
- 省市县三级联动（webFrom...DropdownList）
- web前端之省市县三级联动
- 使用三层实现省市县三级联动（利用ajax实现无刷新效果）
- js版无刷新省市县三级联动(作者：iuhxq )
- ajax 实现无刷新实现省市县(区)三级联动
- 省市县三级联动WebView实现
- web开发 省市县三级联动