jquery三级联动模糊查询_JQuery中国省市区无刷新三级联动查询

之前有写过用《Ajax控件来实现中国的省市区无刷新查询》

今天用JQuery来实现，用Ajax控件和JQuery的优缺点就先不说了。

效果图如下：

下面来结合代码来详细说明一下如何用JQuery实现。

在HTML页的Body标签内添加三个Select选项，分别用于显示省、市、区

接下来该在Html页面编写JS脚本了，其中应该包含3个方法，即选择省份时，显示对应的市的方法，及选择市对应的区的方法。

1、显示所有省份的方法

function select1() {

$.ajax(

{

type: "post",

url: "Handler.ashx",

data: { "type": "province" },

success: function (msg) {

for (var i = 0; i

$("#S1").append("" + msg[i].ProvinceName + "");

}

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

$("#S2").append("" + msg[i].CityName + "");

}

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

$("#S3").append("" + msg[i].DistrictName + "");

}

}

})

};

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

}