之前有写过用《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();
}

JQuery中国省市区无刷新三级联动查询的更多相关文章

  1. Hibernate+DWR无刷新三级联动

    DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在 ...

  2. Hibernate+struts+JqueryAjax+jSON实现无刷新三级联动

    看网上JqueryAjax三级联动的例子讲不是很全,代码也给的不是很全,给初学者带来一定的难度.小弟自己写了一个,可能有些地方不是很好,希望大家能够提出建议. 用的是Hibernate+struts2 ...

  3. 中国省市区json数据 三级联动

    <label> <span>购买地址</span> <select name="PurchaseProvince" style=" ...

  4. Ajax做无刷新三级联动

    1.引入JS and Jquery包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  5. jquery 无刷新多级联动

    原先不熟悉jquery时,总在寻找无刷新的方法,在此不断的积累自己所知道的jquery属性,常用方法.以下为jquery实现的无刷新联动事件 分公司: <select id="Sele ...

  6. JQuery 实现页面无刷新

    对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...

  7. Ajax省市区无刷新单表联动查询

    方法一: 在很多时候都需要用到无刷新级联查询,本文将以省市区的级联查询作为例子.注:此为单表三级联动 环境:Vistual Studio 2015 .MSSQL 1.首先下载AjaxControlTo ...

  8. WebForm使用JQuery实现DropDownList无刷新联动

    目录(?)[-] 1  JS代码 2 页面相关控件用的是平台封装的控件普通DropDownList也可以 3 后台C代码 注意事项   原来用的微软封装的Ajax控件UpdatePannel和Scri ...

  9. 三级联动查询全国省市区(xml与数据库)

    提供有china.xml和china.sql文件,实现全国省市区的三级联动效果 一.xml实现 import java.awt.EventQueue; import javax.swing.JFram ...

随机推荐

  1. 2015ACM/ICPC亚洲区长春站 E hdu 5531 Rebuild

    Rebuild Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total S ...

  2. BZOJ2051 : A Problem For Fun

    树的点分治,将点分治的过程记录下来,每一个分治结构按到分治中心的距离维护所有点. 对于一个点二分答案,然后在$O(\log n)$个分治结构中二分查找,时间复杂度$O(n\log^3n)$. #inc ...

  3. POJ 1548 (二分图+最小路径覆盖)

    题目链接:http://poj.org/problem?id=1548 题目大意:给出一张地图上的垃圾,以及一堆机器人.每个机器人可以从左->右,上->下.走完就废.问最少派出多少个机器人 ...

  4. 20145325张梓靖 实验五 "JAVA的网络编程"

    20145325张梓靖 实验五 "JAVA的网络编程" 实验内容 使用 JVAV语言 进行网络编程 对明文进行加密 设计过程 我完成的是客户端,服务端同伴 20145308刘昊阳 ...

  5. #region 自适应屏幕分辨率

            #region 自适应屏幕分辨率 [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Auto)]        public ...

  6. CentOS6.4 配置Tengine

    1.安装Nginx所需的pcre-devel库 yum install -y gcc gcc-c++ wget ftp://ftp.csx.cam.ac.uk/pub/software/program ...

  7. elasticsearch2.2 集群搭建各种坑

        目前生产环境的es版本是1.0版本,需要升级到最新的2.2版本,于是在测试环境进行部署集群测试,在测试过程中遇到的坑相当多,下面详细介绍下.       1. 版本升级到2.2后,必须建一个单 ...

  8. CentOS 实现自动登陆

    1. 在ssh-client一边使用ssh-keygen生成一对rsa key $ssh-keygen -t rsa 2. 在ssh-client一边使用ssh-add将刚生成的private key ...

  9. MySQL的show语句大全

    常用的MySQL show 语句列举如下: 1.show databases ; // 显示mysql中所有数据库的名称 2.show tables [from database_name]; // ...

  10. Win2K3一句话开3389

    网上流传了很多开3389的exe小工具,还有读写注册表的bat批处理,有的是操作注册表,有的是操作各种组件这里提供一个不会被拦截,而且可以使用的开3389的cmd一句话: wmic RDTOGGLE  ...