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