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