思路:利用数据库或json数据来做省市区三级联动
省市区的三级联动有两种写法
1,数据从数据库中读取 2,用json数据来获取数据
注:本文中我用的表和给出的数据表数据不是一样的,字段是不同的,用的时候,自己改一下就可以了。
数据库的数据,省地县.txt,Newtonsoft.Json.dll :点击下载
一、数据库中获取数据添加到页面上
第一步、创建数据库
数据我们准备好了,然后就是我们取数据了,我们新建一个一般处理程序 GetJsonData.ashx
<%@ WebHandler Language="C#" Class="GetJsonData" %>
using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;
using Newtonsoft.Json; //这个需要引用,下面的 JsonConvert.serializeObject才能调用出来 下载里面有
public class GetJsonData : IHttpHandler
{
//连接到我们的数据库
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["strConn"].ConnectionString);
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string type = context.Request.Form["type"] == null ? "" : context.Request.Form["type"].ToString();
//省
if (type.Equals("GetProvince"))
{
string str = "select * from provinces";
using (SqlDataAdapter ada = new SqlDataAdapter(str, conn))
{
DataSet ds = new DataSet();
ada.Fill(ds);
context.Response.Write(JsonConvert.SerializeObject(ds.Tables[0]));
}
}
//获取市的时候需要把省的ID传过来加载市
if (type.Equals("GetCity"))
{
string sheng = context.Request.Form["Province"] == null ? "" : context.Request.Form["Province"];
string str = "select * from cities where provinceid='" + sheng + "'";
using (SqlDataAdapter ada = new SqlDataAdapter(str, conn))
{
DataSet ds = new DataSet();
ada.Fill(ds);
context.Response.Write(JsonConvert.SerializeObject(ds.Tables[0]));
}
}
//获取区的时候
if (type.Equals("GetCityBlock"))
{
string shi = context.Request.Form["City"] == null ? "" : context.Request.Form["City"];
string str = "select * from areas where cityid='" + shi + "'";
using (SqlDataAdapter ada = new SqlDataAdapter(str, conn))
{
DataSet ds = new DataSet();
ada.Fill(ds);
context.Response.Write(JsonConvert.SerializeObject(ds.Tables[0]));
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
一般处理程序是我们取数据的地方
前台页面则是显示数据的位子
<input id="txtSheng" type="hidden" runat="server" /> //这个可以用作存储sheng的值,修改数据的时候可以显示sheng的值赋值给下面的select id='Sheng'
<span class="ress">
<select id="Sheng" οnchange="GetShi();" runat="server">
</select>
</span>
<input id="txtShi" type="hidden" runat="server" />
<span class="ress">
<select id="Shi" οnchange="GetQu();" runat="server">
</select>
</span>
<input id="txtQu" type="hidden" runat="server" />
<span class="ress">
<select id="Qu" runat="server">
</select>
</span>
<input class="ress_text" id="txtAddress" type="text" runat="server" />
现在我们就只需要把数据填充到相应的位子就可以了
js代码
<script src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
GetSheng();
//修改的时候 给个状态判断是否为修改
if($("#hfDemo").val()>0){
$("#sheng").val("赋值");
GetShi();
$("#Shi").val("赋值");
GetQu();
$("@Qu").val("赋值");
}
})
function GetSheng() {
$("#Sheng").empty();
$("#Sheng").append("<option value='0'>请选择</option>");
$.ajax({
type: "post",
url: "GetJsonData.ashx",
datatype: "josn", //数据类型
data: "type=GetProvince",
async: false, //把异步改为同步
success: function (data) {
var GetData = eval(data); //转一下型,GetData相当于一张表的模型了,打点就可以调用字段
$.each(GetData, function (i, item) {
$("#Sheng").append("<option value='" + item.provinceid + "'>" + item.province + "</option>");
})
}
})
GetShi();
}
function GetShi() {
var sheng = $("#Sheng").val();
$("#Shi").empty();
$("#Shi").append("<option value='0'>请选择</option>");
$.ajax({
type: "post",
url: "GetJsonData.ashx",
datatype: "josn",
data: "type=GetCity&Province=" + sheng,
async: false,
success: function (data) {
var GetData = eval(data);
$.each(GetData, function (i, item) {
$("#Shi").append("<option value='" + item.cityid + "'>" + item.city + "</option>");
})
}
})
GetQu();
}
function GetQu() {
var shi = $("#Shi").val();
$("#Qu").empty();
$("#Qu").append("<option value='0'>请选择</option>");
$.ajax({
type: "post",
url: "GetJsonData.ashx",
datatype: "josn",
data: "type=GetCityBlock&City=" + shi,
async: false,
success: function (data) {
var GetData = eval(data);
$.each(GetData, function (i, item) {
$("#Qu").append("<option value='" + item.areaid + "'>" + item.area + "</option>");
})
}
})
}
数据库中读取数据已完成
下面我们看从.txt文本中把json数据读取出来
首先还是得准备数据,可以去网上搜省市区json数据格式有很多,可以自己找,我用的也是网上下载的,模板在下载里面
我们把这个.txt文件复制到我们的项目中来
<input id="hfSheng" type="hidden" runat="server" />
<span class="ress">
<select id="JSheng" οnchange="JGetShi();" runat="server">
</select>
</span>
<input id="hfShi" type="hidden" runat="server" />
<span class="ress">
<select id="JShi" οnchange="JGetQu();" runat="server">
</select>
</span>
<input id="hfQu" type="hidden" runat="server" />
<span class="ress">
<select id="JQu" runat="server">
</select>
</span>
同样js来获取数据
<script src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
JGetSheng();
})
function JGetSheng() {
$("#JSheng").empty();
$("#JSheng").append("<option value='0'>请选择</option>");
$.get("省地县.txt", function (data) {
var GetData = eval(data);
//console.log(GetData); 每个人下载的json格式可能会不一样,可以这样去看看格式为怎么样的,下面好取数据
$.each(GetData, function (i, item) {
if (item.level == "1") {
$("#JSheng").append("<option value='" + item.sheng + "'>" + item.name + "</option>");
}
}
})
JGetShi();
}
function JGetShi() {
var sheng = $("#JSheng").val();
$("#JShi").empty();
$("#JShi").append("<option value='0'>请选择</option>");
$.get("省地县.txt", function (data) {
var GetData = eval(data);
$.each(GetData, function (i, item) {
if (item.sheng == sheng && item.level == "2") {
$("#JShi").append("<option value='" + item.di + "'>" + item.name + "</option>");
}
})
})
JGetQu();
}
function JGetQu() {
var sheng = $("#JSheng").val();
var shi = $("#JShi").val();
$("#JQu").empty();
$("#JQu").append("<option value='0'>请选择</option>");
$.get("省地县.txt", function (data) {
var GetData = eval(data);
$.each(GetData, function (i, item) {
if (item.sheng == sheng && item.di == shi && item.level == "3") {
$("#JQu").append("<option value='" + item.xian + "'>" + item.name + "</option>");
}
})
})
}
</script>
这就是两中获取省市区的数据,喜欢那种看自己吧!!