JQuery+Ajax制作省市联动

 1 $(document).ready(function () {
 2             $("#Province").append("<option value=‘‘>" + "--请选择--" + "</option>");
 3             $("#City").append("<option value=‘‘>" + "--请选择--" + "</option>");
 4             $("#District").append("<option value=‘‘>" + "--请选择--" + "</option>");
 5             $.ajax({
 6                 url: "Handler1.ashx?type=0", //路径 地址
 7                 type: "get", //类型,post\get
 8                 dataType: "json", //json数据
 9                 success: function (msg) {//返回结果
10                     for (var i = 0; i < msg.length; i++) {
11                         $("#Province").append("<option value=‘" + msg[i].ProvinceID + "‘>" + msg[i].ProvinceName + "</option>");
12                     }
13                 }
14             });
15             //市
16             $("#Province").change(function () {
17                 $("#City").empty(); //清空数据
18                 $("#District").empty(); //清空数据
19                 $("#District").append("<option value=‘‘>" + "--请选择--" + "</option>");
20                 var ProvinceID = $(this).val();
21
22                 $.ajax({
23                     url: "Handler1.ashx?type=1",
24                     type: "get", //类型
25                     data: {
26                         ProvinceID: ProvinceID
27                     },
28                     dataType: "json", //json数据
29                     success: function (msg) {
30                         for (var i = 0; i < msg.length; i++) { $("#City").append("<option value=‘" + msg[i].CityID + "‘>" + msg[i].CityName + "</option>"); }
31                     }
32                 });
33             });
34
35             //区
36             $("#City").change(function () {
37                 $("#District").empty(); //清空数据
38                 var CityID = $(this).val();
39                 $.ajax({
40                     url: "Handler1.ashx?type=2",
41                     type: "get", //类型
42                     data: {
43                         CityID: CityID
44                     },
45                     dataType: "json", //json数据
46                     success: function (msg) {
47                         for (var i = 0; i < msg.length; i++) { $("#District").append("<option value=‘" + msg[i].DistrictID + "‘>" + msg[i].DistrictName + "</option>"); }
48                     }
49                 });
50
51             });
52         });
53
54 <select id="Province"></select>
55 <select id="City"></select>
56 <select id="District" ></select>
57         

结合ajax(一般处理程序)

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Data;
 6 using System.Web.Script.Serialization;
 7
 8 namespace GovSystem.Company
 9 {
10     /// <summary>
11     /// Handler1 的摘要说明
12     /// </summary>
13     public class Handler1 : IHttpHandler
14     {
15
16         public string text;
17         public void ProcessRequest(HttpContext context)
18         {
19             int action = Convert.ToInt32(context.Request.QueryString["type"]);
20             switch (action)
21             {
22                 case (int)GetType.省:
23                     text = Sel_Province(context);
24                     break;
25                 case (int) GetType.市:
26                     text=Sel_City(context);
27                     break;
28                 case (int)GetType.区:
29                     text = Sel_District(context);
30                     break;
31             }
32             context.Response.ContentType = "text/plain";
33             context.Response.Write(text);
34         }
35         //省
36         private string Sel_Province(HttpContext context)
37         {
38             XieKe.BLL.S_Province b_Province = new XieKe.BLL.S_Province();
39             DataTable dt=b_Province.GetList("").Tables[0];
40             List<XieKe.Model.S_Province> listInfo = new List<XieKe.Model.S_Province>();
41             for (int i = 0; i < dt.Rows.Count; i++)
42             {
43                 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() };
44                 listInfo.Add(m_Province);
45             }
46             JavaScriptSerializer jssp = new JavaScriptSerializer();
47             string s= jssp.Serialize(listInfo);
48             return s;
49         }
50         //市
51         private string Sel_City(HttpContext context)
52         {
53             string ProvinceID = context.Request.QueryString["ProvinceID"];
54             XieKe.BLL.S_City b_City = new XieKe.BLL.S_City();
55
56             DataTable dt = b_City.GetList("ProvinceID="+ProvinceID).Tables[0];
57             List<XieKe.Model.S_City> listInfo = new List<XieKe.Model.S_City>();
58             for (int i = 0; i < dt.Rows.Count; i++)
59             {
60                 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() };
61                 listInfo.Add(m_City);
62             }
63             JavaScriptSerializer jssp = new JavaScriptSerializer();
64             return jssp.Serialize(listInfo);
65         }
66         //区
67         private string Sel_District(HttpContext context)
68         {
69             string CityID = context.Request.QueryString["CityID"];
70             XieKe.BLL.S_District b_City = new XieKe.BLL.S_District();
71             DataTable dt = b_City.GetList("CityID=" + CityID).Tables[0];
72             List<XieKe.Model.S_District> listInfo = new List<XieKe.Model.S_District>();
73             for (int i = 0; i < dt.Rows.Count; i++)
74             {
75                 XieKe.Model.S_District m_District = new XieKe.Model.S_District { CityID = Convert.ToInt32(dt.Rows[i]["CityID"]), DistrictName = dt.Rows[i]["DistrictName"].ToString() };
76                 listInfo.Add(m_District);
77             }
78             JavaScriptSerializer jssp = new JavaScriptSerializer();
79             return jssp.Serialize(listInfo);
80         }
81         public bool IsReusable
82         {
83             get
84             {
85                 return false;
86             }
87         }
88         public enum GetType
89         {
90             省 = 0,
91             市 = 1,
92             区 = 2,
93         };
94     }
95
96 }
时间: 2024-11-05 13:04:12

JQuery+Ajax制作省市联动的相关文章

基于jQuery+JSON的省市联动效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jquery ajax实现省市二级联动

今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据 这里数据库我使用的是mysql,先看下表格: provience表 city表 这里使用provience表的主键作为city表的外键,等下根据省份的id查找对应的市区 查询方法的封装 接下来就是实现查询所有省市以及根据省份id查找对应的城市的方法,这里我写了一个BaseDao封装了一些基本的数据库链接以及关闭连接的方法: BaseDao.java package com.jqueryajax.

Json 基于jQuery+JSON的省市联动效果

helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 查看演示 下载源码 HTML 首先在head中载入jquery库和cityselect插件. <script type="tex

ajax完成省市联动

1.用ajax传输xml文件完成省市联动 首先创建数据库 省市联动一个province表一个city表,一对多关系 这是province表 pid pname1 重庆2 四川 这是city表 cid cname pid1  沙坪坝区 12 江北区 13 渝中区 14 成都 25 眉山    26 乐山   2 下拉列表的html代码: <tr> <td>籍贯</td> <td> <select id="province" name=

Jquery Ajax + php 三级联动实例

sanji.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

ASP.NET webform开发中基于Jquery,AJAX的三级联动

主要html代码 <select id="province"> <option value="0">--请选择省份--</option> </select> <select id="city"> <option value="0">--请选择城市--</option> </select> <select id="ar

用jQuery,ajax,实现三级联动封装JS的文件

// JavaScript Document $(document).ready(function(e) { //找到ID=SANJI的DIV,造三个下拉扔进去 var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"; $("#sanji").html(str); //

jQuery ajax省市区四级联动

$(function(){ query(); //获取到市 $('#province').change(function(){ var id = $('#province').val(); $.ajax({ url:'/user/selectp?rootid='+id, type:'GET', dataType:'json', success:function(data){ var content = '<option>市</option>'; for (var i in data

Ajax制作二级联动下拉列表框

1.index.jsp 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <html> 3 <head> 4 <script type="text/javascript" language="javaScript"> 5 var xmlHttp = false; /