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处理页面对应的也只是三个方法而已，一看就明白，所以就直接把代码贴出来了，如果不太懂的话可以联系我。

注：如有需要数据库请联系或留下邮箱。

(由于最近比较忙，每天基本是第一时间给博友发送邮件，不知道博客园有没有网盘，现在放在个人站点下载

地址：RAR压缩包或者无需下载，纯文本格式，可直接全选复制)

   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();    }