省市区三级联动

时间:2021-10-29 11:38:19

思路:利用数据库或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>

省市区三级联动

这就是两中获取省市区的数据,喜欢那种看自己吧!!