分享一下自己最近写的城市联动。技术使用ajax+jQuery实现。

首先请看前台的javascript代码。

以下是连个实现异步加载的方法。

    <script type="text/javascript">
$(function () {
loadProvince();
loadCity();
}); function loadProvince() {
$.ajax({
type: "get",
url: "province_city.ashx",
data: "pid=-1",
async: false,//同步
success: function (json) {
var jsons = eval(json);
var province = document.getElementById("province");
for (var i = 0; i < jsons.length; i++) {
var p = jsons[i];
if (p.Pid == -1) {
var option = document.createElement("option");
option.value = p.Id;
option.innerHTML = p.Name;
province.appendChild(option);
}
}
}
});
};
//加载市
function loadCity() {
city.innerHTML = "";//清空控件内容
var pid = document.getElementById("province").value;//获得省的pid
$.ajax({
type: "get",
url: "province_city.ashx",
data: "pid=" + pid,
success: function (json) {
var jsons = eval(json);
var city = document.getElementById("city");
for (var i = 0; i < jsons.length; i++) {
var c = jsons[i];
var option = document.createElement("option");
option.value = c.Id;
option.innerHTML = c.Name;
city.appendChild(option);
}
}
});
};
</script>

在使用前请引用jQuery。

后台的代码用的ashx.

        public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string s= context.Request.QueryString["pid"];
int pid;
if (int.TryParse(s,out pid))
{
string json = GetDataByPid(pid);
context.Response.Write(json);
}
} private string GetDataByPid(int pid)
{
List<Data> list = GetAllDatas(); List<Data> datas = new List<Data>(); foreach (Data item in list)
{
if (item.Pid == pid)
{
datas.Add(item);
}
}
//把对象转换成json格式的字符串
JavaScriptSerializer jss = new JavaScriptSerializer();
string json = jss.Serialize(datas);
return json;
}
private List<Data> GetAllDatas()
{
List<Data> list = new List<Data>(); list.Add(new Data() { Id = , Name = "河南省", Pid = - });
list.Add(new Data() { Id = , Name = "台湾省", Pid = - });
list.Add(new Data() { Id = , Name = "日本省", Pid = - }); list.Add(new Data() { Id = , Name = "郑州市", Pid = });
list.Add(new Data() { Id = , Name = "济源市", Pid = });
list.Add(new Data() { Id = , Name = "焦作市", Pid = }); list.Add(new Data() { Id = , Name = "高雄市", Pid = });
list.Add(new Data() { Id = , Name = "台北", Pid = });
list.Add(new Data() { Id = , Name = "台中", Pid = }); list.Add(new Data() { Id = , Name = "东京", Pid = });
list.Add(new Data() { Id = , Name = "冲绳", Pid = });
list.Add(new Data() { Id = , Name = "大阪", Pid = });
return list;
}

jQuery+ajax城市联动的更多相关文章

  1. [ PHP+jQuery ] ajax 多级联动菜单的应用:电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板

    /** jQuery version: 1.8.3 Author: 小dee Date: 2014.11.8 */ 接上一篇博客. 实现带缓存的仿亚马逊下拉面板 效果图: 图1 初始 图2 点击省份 ...

  2. 份-城市,基于jQuery的AJAX二级联动,用Struts2整合AJAX【非数据库版】

    package loaderman.provincecity; import java.io.IOException; import java.util.LinkedHashSet; import j ...

  3. JQUERY省、市、县城市联动选择

    JQUERY 插件开发——CITYLINKAGE(省.市.县城市联动选择) 第一部分:背景   开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前 ...

  4. 使用jquery.ajax实现省市的二级联动(SSH架构)

    首先实现jquery ajax的二级联动 要下载个jquery.js 我在这里就不准备了 自行百度下载 背景介绍:通过部门的ID来查找部门下的所有班级 我实现二级联动的思路是:先查询所有部门 显示在页 ...

  5. jquery ajax实现省市二级联动

    今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据 这里数据库我使用的是mysql,先看下表格: provience表 city表 这里使用provi ...

  6. jquery实现城市选择器效果(二级联动)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JQuery+Ajax实战三级下拉列表联动(八)

    本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作 二:用了自动代码生成器 1.Dal层的代码: publi ...

  8. Jquery 插件开发——citylinkage(省、市、县城市联动选择)

    第一部分:背景  开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前呢,一直想写这个插件,然后错过了一个写这个插件的机会(这个得回顾到很久以前了. ...

  9. java结合jQuery.ajax实现左右菜单联动刷新列表内容

    http://域名/一级菜单ID-二级菜单ID/ 用这种URL请求页面,出现如图所看到的内容: 该页面包括四部分,顶部文件夹+左側菜单+右側菜单+右下側数据列表. 左側菜单包括一级菜单和二级菜单,点击 ...

随机推荐

  1. Minimal string CodeForces - 797C

    Minimal string CodeForces - 797C 题意:有一个字符串s和空串t和u,每次操作可以将s的第一个字符取出并删除然后放到t的最后,或者将t的最后一个字符取出并删除然后放到u的 ...

  2. excel之实验数据处理线性拟合

    实验前准备:设计表格项,通过设计公式,从而输入原始数据后直接得到最终的结果数据,学习常用的VBA公式及处理:Cn-$B$4,其中的$B$4表示绝对单元格位置;SUM(Xm:Yn)求范围内的和. 针对实 ...

  3. AWK整理

    处理模式: awk的处理文本和数据的方式是这样的,它逐行扫描文件,从第一行到最后一行,寻找匹配的特定模式的行,并在这些行上进行你想要的操作.如果没有指定处理动作,则把匹配的行显示到标准输出(屏幕),如 ...

  4. python中的sort和sorted

    共同点 都有三个参数, cmp用户自定义(指定函数),每个元素都会调用,效率没key高 key带一个参数的函数,用来为每个元素提取比较值 reverse=True    翻转 sort sort作用的 ...

  5. 分层开发之C#分层

    假如没有用分层开发,仔细分析三人的开发过程,很容易发现其中的问题: >三人排队式的轮番工作,花费的时间是三人工作时间之和. >后面开发的人基本都是要先花费时间熟悉前面人的代码,否则开发难以 ...

  6. vscode中将本地数据push至git repository

    1.新建repository 2.本地写好的代码 3.执行git init 初始化git配置文件 4.提交已暂存文件 5.填写提交信息 6.执行push命令 7.完成

  7. MySQL系列:utf8_bin和utf8_general_ci编码的区别

    MySQL中存在多种格式的utf8编码,其中最常见的两种为: utf8_bin utf8_general_ci utf8_bin将字符串中的每一个字符用二进制数据存储,区分大小写;utf8_gener ...

  8. 【数据分析 R语言实战】学习笔记 第七章 假设检验及R实现

    假设检验及R实现 7.1假设检验概述 对总体参数的具体数值所作的陈述,称为假设;再利用样本信息判断假设足否成立,这整个过程称为假设检验. 7.1.1理论依据 假设检验之所以可行,其理沦背景是小概率理论 ...

  9. Sql Server RowNumber和表变量分页性能优化小计

    直接让代码了,对比看看就了解了 当然,这种情况比较适合提取字段较多的情况,要酌情而定 性能较差的: WITH #temp AS                       (              ...

  10. SQL系列学习 存储过程&事物语法

    /*学习事物基本语法*/ /*增加课室名的唯一索引*/ ALTER table class add constraint uni_ClassName unique(name) /*创建存储过程,其中增 ...