分享一下自己最近写的城市联动。技术使用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;
}

最新文章

  1. angular2系列教程(九)Jsonp、URLSearchParams、中断选择数据流
  2. 说说BPM数据表和日志表中几个状态字段的详细解释
  3. Fast Fourier Transform
  4. 判断iframe是否加载完成的完美方法
  5. java 读取文件路径空格和中文的处理
  6. URAL1410. Crack
  7. 利用Jquery实现http长连接(LongPoll)
  8. (转) ThinkPHP模板自定义标签使用方法
  9. [转] Hive 内置函数
  10. 【CTSC1999】【解救大兵瑞恩】
  11. Detours信息泄漏漏洞
  12. OpenGL ES着色器语言之操作数(官方文档第五章)
  13. 前端笔记之JavaScript(十二)缓冲公式&amp;检测设备&amp;Data日期
  14. python &quot;import this&quot;
  15. [P5170] 类欧几里得算法
  16. AtCoder Regular Contest 099 (ARC099) E - Independence 二分图
  17. Interllij IDEA中启动web项目
  18. hdu2328 Corporate Identity【string库使用】【暴力】【KMP】
  19. Redis(一)入门
  20. window系统更新导致很多服务出错

热门文章

  1. Hdu 5442 Favorite Donut (2015 ACM/ICPC Asia Regional Changchun Online 最大最小表示法 + KMP)
  2. Codeforces Round #418 (Div. 2) A
  3. Eclipse 运行内存不足情况
  4. RHEL 6.5 ----Postfix邮件服务器
  5. Solr打分排序规则自定义【转】
  6. hash 【模板】
  7. Jquery 中使用String.Format
  8. disconf 分布式配置
  9. Oracle的数据伪列(ROWNUM)
  10. liunx中安装软件的几种方式