JQuery中國省市區無刷新三級聯動查詢

之前有寫過用《Ajax控件來實現中國的省市區無刷新查詢》

今天用JQuery來實現，用Ajax控件和JQuery的優缺點就先不說了。

效果圖如下：

下面來結合代碼來詳細說明一下如何用JQuery實現。

在HTML頁的Body標籤內添加三個Select選項，分別用於顯示省、市、區

  <select id="S1" >
    </select>
    <select id="S2">
    </select>
    <select id="S3">
    </select>

接下來該在Html頁面編寫JS腳本了，其中應該包含3個方法，即選擇省份時，顯示對應的市的方法，及選擇市對應的區的方法。

1、顯示所有省份的方法

function select1() {
            $.ajax(
            {
                type: "post",
                url: "Handler.ashx",
                data: { "type": "province" },
                success: function (msg) {
                    for (var i = 0; i < msg.length; i++) {
                        $("#S1").append("<option value=" + msg[i].ProvinceID + ">" + msg[i].ProvinceName + "</option>");
                    }
                    select2();
                }
            })
        };

2、顯示對應省份的市的方法

 function select2() {
            $("#S2").html("");
            $.ajax(
            {
                type: "post",
                url: "Handler.ashx",
                data: { "type": "city","provinceID":$('#S1').attr("value") },
                success: function (msg) {
                    for (var i = 0; i < msg.length; i++) {
                        $("#S2").append("<option value=" + msg[i].CityID + ">" + msg[i].CityName + "</option>");
                    }
                    select3();
                }
            })
        };

3、顯示對應市的區的方法

function select3() {
            $("#S3").html("");
            $.ajax(
            {
                type: "post",
                url: "Handler.ashx",
                data: { "type": "district","cityID":$('#S2').attr("value") },
                success: function (msg) {
                    for (var i = 0; i < msg.length; i++) {
                        $("#S3").append("<option value=" + msg[i].DistrictID + ">" + msg[i].DistrictName + "</option>");
                    }
                }
            })
        };

在JS方法寫完後，要在頁面載入的時候先顯示“北京市”“北京市”“XX區”，總不能空白的給用戶選擇吧，呵呵。所以再加一段JS綁定方法。

 $(function () {
            select1();
            $('#S1').bind("change", select2);
            $('#S2').bind("change", select3);
        });

 

大家應該注意到了Ajax的格式，其中的url是處理頁面，所以也要添加該頁面。

Handler處理頁面對應的也只是三個方法而已，一看就明白，所以就直接把代碼貼出來了，如果不太懂的話可以聯繫我。

注：如有需要數據庫請聯繫或留下郵箱。

   string str = @"Data Source=服務器;Initial Catalog=City;Integrated Security=True ;uid=sa; pwd=123456";
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "application/json";
        if (context.Request["type"]=="province")
        {
            context.Response.Write(select1());
       }
       else if ( context.Request["type"] == "city" ) {
            context.Response.Write ( select2 ( context.Request["provinceID"] ) );
        }
         else if ( context.Request["type"] == "district" ) {
            context.Response.Write ( select3 ( context.Request["cityID"] ) );
        }
    }
    public string select1() {
        SqlConnection scon = new SqlConnection(str);
        string sql = "select * from S_Province";
        SqlDataAdapter sda = new SqlDataAdapter(sql,scon );
        DataSet ds = new DataSet();
        sda.Fill(ds);
        System.Text.StringBuilder sb = new System.Text.StringBuilder();
        sb.Append("[");
        foreach (DataRow item in ds.Tables[0].Rows)
        {
            sb.Append("{");
            sb.Append("\"ProvinceID\":\"" + item[0] + "\",\"ProvinceName\":\"" + item[1] + "\"");
            sb.Append("},");
        }
        sb.Remove(sb.Length - 1, 1);
        sb.Append("]");
        return sb.ToString();
    }


    public string   select2 (string  id ) {
        SqlConnection scon = new SqlConnection ( str );
        string sql = "select * from S_City where provinceID="+id;
        SqlDataAdapter sda = new SqlDataAdapter ( sql, scon );
        DataSet ds = new DataSet ( );
        sda.Fill ( ds );
        System.Text.StringBuilder sb = new System.Text.StringBuilder ( );
        sb.Append ( "[" );
        foreach ( DataRow item in ds.Tables[0].Rows ) {
            sb.Append ( "{" );
            sb.Append ( "\"CityID\":\"" + item[0] + "\",\"CityName\":\"" + item[1] + "\"" );
            sb.Append ( "}," );
        }
        sb.Remove ( sb.Length - 1, 1 );
        sb.Append ( "]" );
        return sb.ToString ( );
    }
    
    public string select3(string id) {
        SqlConnection scon = new SqlConnection(str);
        string sql = "select * from S_District where CityID="+id;
        SqlDataAdapter sda = new SqlDataAdapter(sql,scon );
        DataSet ds = new DataSet();
        sda.Fill(ds);
        System.Text.StringBuilder sb = new System.Text.StringBuilder();
        sb.Append("[");
        foreach (DataRow item in ds.Tables[0].Rows)
        {
            sb.Append("{");
            sb.Append("\"DistrictID\":\"" + item[0] + "\",\"DistrictName\":\"" + item[1] + "\"");
            sb.Append("},");
        }
        sb.Remove(sb.Length - 1, 1);
        sb.Append("]");
        return sb.ToString();
    }