ajax省市联动案例 JQuery+Ajax制作省市联动

$(document).ready(function () {

$("#Province").append("" + "--请选择--" + "");

$("#City").append("" + "--请选择--" + "");

$("#District").append("" + "--请选择--" + "");

$.ajax({

url: "Handler1.ashx?type=0", //路径 地址

type: "get", //类型，post\get

dataType: "json", //json数据

success: function (msg) {//返回结果

for (var i = ; i < msg.length; i++) {

$("#Province").append("" + msg[i].ProvinceName + "");

}

}

});

//市

$("#Province").change(function () {

$("#City").empty(); //清空数据

$("#District").empty(); //清空数据

$("#District").append("" + "--请选择--" + "");

var ProvinceID = $(this).val();

$.ajax({

url: "Handler1.ashx?type=1",

type: "get", //类型

data: {

ProvinceID: ProvinceID

},

dataType: "json", //json数据

success: function (msg) {

for (var i = ; i < msg.length; i++) { $("#City").append("" + msg[i].CityName + ""); }

}

});

});

//区

$("#City").change(function () {

$("#District").empty(); //清空数据

var CityID = $(this).val();

$.ajax({

url: "Handler1.ashx?type=2",

type: "get", //类型

data: {

CityID: CityID

},

dataType: "json", //json数据

success: function (msg) {

for (var i = ; i < msg.length; i++) { $("#District").append("" + msg[i].DistrictName + ""); }

}

});

});

});

结合ajax(一般处理程序)

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

using System.Web.Script.Serialization;

namespace pany

{

///

/// Handler1 的摘要说明

///

public class Handler1 : IHttpHandler

{

public string text;

public void ProcessRequest(HttpContext context)

{

int action = Convert.ToInt32(context.Request.QueryString["type"]);

switch (action)

{

case (int)GetType.省:

text = Sel_Province(context);

break;

case (int) GetType.市:

text=Sel_City(context);

break;

case (int)GetType.区:

text = Sel_District(context);

break;

}

context.Response.ContentType = "text/plain";

context.Response.Write(text);

}

//省

private string Sel_Province(HttpContext context)

{

XieKe.BLL.S_Province b_Province = new XieKe.BLL.S_Province();

DataTable dt=b_Province.GetList("").Tables[];

List listInfo = new List();

for (int i = ; i < dt.Rows.Count; i++)

{

XieKe.Model.S_Province m_Province = new XieKe.Model.S_Province { ProvinceID = long.Parse(dt.Rows[i]["ProvinceID"].ToString()), DateCreated = Convert.ToDateTime(dt.Rows[i]["DateCreated"]), DateUpdated = Convert.ToDateTime(dt.Rows[i]["DateUpdated"]), ProvinceName = dt.Rows[i]["ProvinceName"].ToString() };

listInfo.Add(m_Province);

}

JavaScriptSerializer jssp = new JavaScriptSerializer();

string s= jssp.Serialize(listInfo);

return s;

}

//市

private string Sel_City(HttpContext context)

{

string ProvinceID = context.Request.QueryString["ProvinceID"];

XieKe.BLL.S_City b_City = new XieKe.BLL.S_City();

DataTable dt = b_City.GetList("ProvinceID="+ProvinceID).Tables[];

List listInfo = new List();

for (int i = ; i < dt.Rows.Count; i++)

{

XieKe.Model.S_City m_City = new XieKe.Model.S_City { CityID = long.Parse(dt.Rows[i]["CityID"].ToString()), CityName = dt.Rows[i]["CityName"].ToString(), DateCreated = Convert.ToDateTime(dt.Rows[i]["DateCreated"]), DateUpdated = Convert.ToDateTime(dt.Rows[i]["DateUpdated"]), ProvinceID = long.Parse(dt.Rows[i]["ProvinceID"].ToString()), ZipCode = dt.Rows[i]["ZipCode"].ToString() };

listInfo.Add(m_City);

}

JavaScriptSerializer jssp = new JavaScriptSerializer();

return jssp.Serialize(listInfo);

}

//区

private string Sel_District(HttpContext context)

{

string CityID = context.Request.QueryString["CityID"];

XieKe.BLL.S_District b_City = new XieKe.BLL.S_District();

DataTable dt = b_City.GetList("CityID=" + CityID).Tables[];

List listInfo = new List();

for (int i = ; i < dt.Rows.Count; i++)

{

XieKe.Model.S_District m_District = new XieKe.Model.S_District { CityID = Convert.ToInt32(dt.Rows[i]["CityID"]), DistrictName = dt.Rows[i]["DistrictName"].ToString() };

listInfo.Add(m_District);

}

JavaScriptSerializer jssp = new JavaScriptSerializer();

return jssp.Serialize(listInfo);

}

public bool IsReusable

{

get

{

return false;

}

}

public enum GetType

{

省 = ,

市 = ,

区 = ,

};

}

}

使用jquery&period;ajax实现省市的二级联动&lpar;SSH架构&rpar;

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

jquery ajax实现省市二级联动

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

Json 基于jQuery&plus;JSON的省市联动效果

作者:月光光时间:-09-12 21:57标签:jQueryJSONAjax省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

ajax做省市联动

原理: 当select.jsp页面打开时,向服务器发送异步请求,得到所有省份的名称(文本数据).然后使用每个省份名称创建,添加到

基于jQuery&plus;JSON的省市联动效果

省市区联动下拉效果在WEB应用中使用非常广泛,尤其在一些会员信息系统.电商网站最为常见,开发者一般使用AJAX实现无刷新下拉联动. 本文将讲述利用jQuery插件,通过读取JSON数据,实现无刷新动态 ...

ASP&period;NET webform基于Jquery&comma;AJAX的三级联动

主要html代码 --请选择省份--

用jQuery&comma;ajax&comma;实现三级联动封装JS的文件

// JavaScript Document $(document).ready(function(e) { //找到ID=SANJI的DIV,造三个下拉扔进去 var str = "&lt ...

JQuery中的省市联动

html &plus; ashx 实现Ajax省市联动

基本思路:1.了解数据库中省和市的表结构及关联主键 2.创建html页面及select标签 3.通过ajax向ashx(一般处理程序)发送后台请求完成联动效果 表结构: 这里,开始创建一个命为demo ...

随机推荐

react 和 ractive的区别

前面进项目的时候同事说项目在用react. 我没有深究,实际中发现是ractive.js.后来发现其实另有一个react.js.和ractive.js是有区别的.不过也有相似的地方. react项目的 ...

PHP如何释放内存之unset销毁变量并释放内存详解

PHP的unset()函数用来清除.销毁变量,不用的变量,我们可以用unset()将它销毁.但是某些时候,用unset()却无法达到销毁变量占用的内存!我们先看一个例子: <?php $s = ...

Linux 查杀进程

ps -eaf |grep "stoporder.php" | grep -v "grep"| awk '{print $2}'|xargs kill -9 # ...

Linux改变文件或目录的访问权限命令

使用 ll 或 ls -l 指令时 第一列会显示出目录下文件的权限 例如∶ -rw-r-r- 横线代表空许可.r代表只读,w代表写,x代表可执行.注意这里共有10个位置.第一个字符指定了文件类型 ...

Windows平台上安装搭建iPhone&sol;iPad的开发环境

/hanxianlong/archive//09/20/4824227.html /yahohi/artic ...

Swift语言中与C&sol;C&plus;&plus;和Java不同的语法(三)

这一部分的主要内容是Swift中的Collections 我们知道Java中的Collection基本上是每一个Java程序猿接触到的第一个重要的知识点. 在Swift中也不例外,Swift中的Col ...

Antenna Placement POJ - 3020 二分图匹配 匈牙利 拆点建图 最小路径覆盖

题意:图没什么用 给出一个地图 地图上有 点 一次可以覆盖2个连续 的点( 左右 或者 上下表示连续)问最少几条边可以使得每个点都被覆盖 最小路径覆盖 最小路径覆盖=|G|-最大匹配数 ...

System&period;Web&period;UI&period;Page的页面基类

服务器端的page类 所有我们编写的页面都继承自page类,可见page类是非常重要的,page类提供了哪些功能,直接决定了我们的页面类可以继承什么功能,或者说,直接决定了我们的页面类功能的强大与否! ...

Linux 下 mysql的基本配置

Linux 下 mysql的基本配置 02月27日 ⁄ MySQL ⁄ 共 3000字 ⁄ 暂无评论 ⁄ 被围观 2,483 views+ 1. Linux mysql安装: $ yu ...

Bata冲刺 第一天

一.冲刺第一天完成任务情况及贡献小时数: 姓名 今日已完成任务 时间(h) 马仲山 代码调整 2 马婧(12) 整理需求文档 2 马婧(13) 整理设计文档 2 马世芳 编写测试文档 2 张俊逸 ...