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请求页面,出现如图所看到的内容: 该页面包括四部分,顶部文件夹+左側菜单+右側菜单+右下側数据列表. 左側菜单包括一级菜单和二级菜单,点击 ...
随机推荐
- UvaLive6442(思维、结论)
结论是:按位置排序好以后,对于真正的答案,走法应该是:依次走向第0个等分点,第1个等分点……这样对于这种等分情况,是最优的调度. /* 先假设一个终点位置然后按位站好 这个位置不一定是最优所以要调 调 ...
- LIS 2015百度之星初赛2 HDOJ 5256 序列变换
题目传送门 题意:中文题面 分析:LIS(非严格):首先我想到了LIS,然而总觉得有点不对:每个数先减去它的下标,防止下面的情况发生:(转载)加入序列是1,2,2,2,3,这样求上升子序列是3,也就是 ...
- 数论/暴力 Codeforces Round #305 (Div. 2) C. Mike and Frog
题目传送门 /* 数论/暴力:找出第一次到a1,a2的次数,再找到完整周期p1,p2,然后以2*m为范围 t1,t2为各自起点开始“赛跑”,谁落后谁加一个周期,等到t1 == t2结束 详细解释:ht ...
- 1. Visio Web 形状 - 无法与 Web 服务器建立连接。请稍后重新进行搜索。处理方式
今天在Visio中使用“搜索形状”,发现不管搜什么,结果都是:Visio Web 形状 - 无法与 Web 服务器建立连接.请稍后重新进行搜索 具体解决方案如下:控制面板=>添加或删除程序=&g ...
- gulp插件之gulp-mock-server
本文讲gulp-mock-server的应用,用于虚拟一个服务器,模拟后台返回json数据给前端,这样可以一定程度上实现前后端分离,约定好接口之后,前后端即可同时开发,从而提高效率. 在gulpfil ...
- AJPFX对选择和冒泡两种排序的理解
冒泡排序和直接选择排序都是排序中比较简单和容易实现的算法,先简单说说两者的区别:先以按照元素从小到大为:冒泡排序:将相邻元素两两比较,如果有比较大的,就把比较大的放在右边,这样的结果就是一轮排序完毕后 ...
- AJPFX总结内部类
内部类:内部类的访问规则:1. 内部类可以直接访问外部类中的成员,包括私有 原因是内部类中持有了一个外部类的引用,格式:外部类.this2. 外部类要访问内部类,必须建立内部类对象访问格式:1. ...
- flutter基础
1.flutter安装 1.参考官网安装sdk https://flutter.io/get-started/install 安卓和IOS需要分别配置对应的开发环境,安卓建议使用as开发,安装Flut ...
- Failed to obtain lock on file /usr/local/nagios/var/ndo2db.lock: Permission denied : Permission denied
Failed to obtain lock on file /usr/local/nagios/var/ndo2db.lock: Permission denied : Permission den ...
- 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function
解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...