jQuery+ajax城市联动
分享一下自己最近写的城市联动。技术使用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城市联动的更多相关文章
- [ PHP+jQuery ] ajax 多级联动菜单的应用:电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板
/** jQuery version: 1.8.3 Author: 小dee Date: 2014.11.8 */ 接上一篇博客. 实现带缓存的仿亚马逊下拉面板 效果图: 图1 初始 图2 点击省份 ...
- 份-城市,基于jQuery的AJAX二级联动,用Struts2整合AJAX【非数据库版】
package loaderman.provincecity; import java.io.IOException; import java.util.LinkedHashSet; import j ...
- JQUERY省、市、县城市联动选择
JQUERY 插件开发——CITYLINKAGE(省.市.县城市联动选择) 第一部分:背景 开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前 ...
- 使用jquery.ajax实现省市的二级联动(SSH架构)
首先实现jquery ajax的二级联动 要下载个jquery.js 我在这里就不准备了 自行百度下载 背景介绍:通过部门的ID来查找部门下的所有班级 我实现二级联动的思路是:先查询所有部门 显示在页 ...
- jquery ajax实现省市二级联动
今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据 这里数据库我使用的是mysql,先看下表格: provience表 city表 这里使用provi ...
- jquery实现城市选择器效果(二级联动)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQuery+Ajax实战三级下拉列表联动(八)
本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作 二:用了自动代码生成器 1.Dal层的代码: publi ...
- Jquery 插件开发——citylinkage(省、市、县城市联动选择)
第一部分:背景 开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前呢,一直想写这个插件,然后错过了一个写这个插件的机会(这个得回顾到很久以前了. ...
- java结合jQuery.ajax实现左右菜单联动刷新列表内容
http://域名/一级菜单ID-二级菜单ID/ 用这种URL请求页面,出现如图所看到的内容: 该页面包括四部分,顶部文件夹+左側菜单+右側菜单+右下側数据列表. 左側菜单包括一级菜单和二级菜单,点击 ...
随机推荐
- Codeforces Round #504 (rated, Div. 1 + Div. 2, based on VK Cup 2018 Final)
考场上只做出了ABDE C都挂了... 题解: A 题解: 模拟 判断前面一段是否相同,后面一段是否相同,长度是否够(不能有重叠) Code: #include<stdio.h> #inc ...
- HDU6438(贪心技巧)
第一眼喜闻乐见的股票问题dp可以暴力,然鹅时间不允许. 于是考虑怎么贪. 这篇题解说得很生动了. 因为每支股票都有买入的潜力所以肯定都加在优先队列里. 然后考虑的是哪些需要加入两次.这是我第二次见到类 ...
- h5-23-百度地图api
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- synchronize早已经没那么笨重
我发现一些同学在网络上有看不少synchronize的文章,可能有些同学没深入了解,只看了部分内容,就急急忙忙认为不能使用它,很笨重,因为是采用操作系统同步互斥信号量来实现的.关于这类的对于synch ...
- php 批量依照ID建立 文件
<?php // 登录验证 include_once('inc/conn.php'); // sql查询 $sql="SELECT * FROM zcgl ";// $res ...
- COGS 2098. Asm.Def的病毒
★☆ 输入文件:asm_virus.in 输出文件:asm_virus.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] “这就是我们最新研制的,世界上第一种可持 ...
- 洛谷 P1006 传纸条
题目描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了.幸运的是 ...
- Hadoop分布式集群安装
环境准备 操作系统使用ubuntu-16.04.2 64位 JDK使用jdk1.8 Hadoop使用Hadoop 2.8版本 镜像下载 操作系统 操作系统使用ubun ...
- pycharm激活码 pycharm安装后激活方式 pycharm汉化包安装
汉化包 下载地址: 链接:http://pan.baidu.com/s/1pL6xWl9 密码:x1fh 将下载好的文件解压:将resources_cn.jar放到安装目录下的lib目录下即可 重启 ...
- Vickers Vane Pump - How To Choose Vane Pump Parameter Specifications?
1 rated pressure selection. The rated pressure of the vane pump products is 7MPa, 1OMPa, 16MPa, 2lMP ...