省市区三级联动
思路：利用数据库或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" onchange="GetShi();" runat="server"> </select> </span> <input id="txtShi" type="hidden" runat="server" /> <span class="ress"> <select id="Shi" onchange="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" onchange="JGetShi();" runat="server"> </select> </span> <input id="hfShi" type="hidden" runat="server" /> <span class="ress"> <select id="JShi" onchange="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>
这就是两中获取省市区的数据，喜欢那种看自己吧！！
