省市区三级联动

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

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