省市區三級聯動

思路：利用數據庫或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>

這就是兩中獲取省市區的數據，喜歡那種看自己吧！！