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请求页面,出现如图所看到的内容: 该页面包括四部分,顶部文件夹+左側菜单+右側菜单+右下側数据列表. 左側菜单包括一级菜单和二级菜单,点击 ...
随机推荐
- 如何改变CSV文件的编码
通常我.csv文件的编码都不是我们想要的,比如我要把他保存为Utf-8格式的,好让我可以导入数据库,不乱码 工具/原料电脑,.csv文件方法/步骤1首先,将.csv文件保存一下.然后鼠标右击打开方式记 ...
- AJPFX关于抽象类和接口的区别
一.设计目的不同:接口体现的是一种规范,,类似于系统的总纲,它制定了系统的各模块应遵守的标准抽象类作为多个子类的共同父类,体现的是模式化的设计,抽象类可以认为是系统的中间产品,已经实现了部分功能,部分 ...
- CF749D Leaving Auction
题目链接: http://codeforces.com/problemset/problem/749/D 题目大意: 一场拍卖会,共n个买家.这些买家共出价n次,有的买家可能一次都没有出价.每次出价用 ...
- 洛谷P3773 [CTSC2017]吉夫特(Lucas定理,dp)
题意 满足$b_1 < b_2 < \dots < b_k$且$a_{b_1} \geqslant a_{b_2} \geqslant \dots \geqslant a_{b_k} ...
- 微信小程序 图片加载失败处理方案
小程序端展示网络资源图片可能会失败,下面介绍一种自己的处理方法 1. js文件中判断图片 url 是否存在,存在则正常显示,不存在则替换url为本地默认图片 2. 当图片 url 存在,但是加载失败时 ...
- es6语法错误
哇,今天折腾了好久解决了一个问题,记录一下. 错误: 解决方法:配置babel,将es6语法转换成es5语法 1. 全局安装babel: npm install babel-cli -g 2. 本地安 ...
- Javaweb之xml
1 XML概述 1.1 XML是什么? eXtensible Markup Language可扩展标记语言 1.2 XML作用 主要是用于描述数据,而 ...
- 测试当前C环境的栈帧增长方向以及传递参数时的压栈顺序
前文链接:上次由于一个很常见的printf-bug(下文有提及)引发了我对栈的思考,并写下了一点总结.这次就尝试对不同的C环境进行实践,检测其传递参数的一些性质. 这是今天写的检查C环境的一段程序.能 ...
- Linux/Windows 实用工具简记
以下只是开发中可能用的比较多的工具,另外还有其他很多未曾提及的实用工具.Linux篇: 1.链接过程的调试:主要用于查看构建过程:如链接时加载的动态库以及运行时加载动态库过程的调试 支持LD_DEBU ...
- SQLite与MySQL、SQLServer等异构数据库之间的数据同步
SQLite DBSync是开源嵌入式数据库SQLite的数据同步引擎,实现了SQLite与SQLite数据库之间以及SQLite与异构数据库(Oracle.MySQL.SQLServer)之间的增量 ...