1、第一步建立一个html页面的，放置省、市、县三个select选择框，代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <script src="./js/jquery-1.8.3.min.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function() {
  9. //  加载所有的省份
  10. $.ajax({
  11. type: "get",
  12. url: "region_action.php", // type=1表示查询省份
  13. data: {"parent_id": "1", "type": "1"},
  14. dataType: "json",
  15. success: function(data) {
  16. $("#provinces").html("<option value=''>请选择省份</option>");
  17. $.each(data, function(i, item) {
  18. $("#provinces").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
  19. });
  20. }
  21. });
  22. $("#provinces").change(function() {
  23. $.ajax({
  24. type: "get",
  25. url: "region_action.php", // type =2表示查询市
  26. data: {"parent_id": $(this).val(), "type": "2"},
  27. dataType: "json",
  28. success: function(data) {
  29. $("#citys").html("<option value=''>请选择市</option>");
  30. $.each(data, function(i, item) {
  31. $("#citys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
  32. });
  33. }
  34. });
  35. });
  36. $("#citys").change(function() {
  37. $.ajax({
  38. type: "get",
  39. url: "region_action.php", // type =2表示查询市
  40. data: {"parent_id": $(this).val(), "type": "3"},
  41. dataType: "json",
  42. success: function(data) {
  43. $("#countys").html("<option value=''>请选择县</option>");
  44. $.each(data, function(i, item) {
  45. $("#countys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
  46. });
  47. }
  48. });
  49. });
  50. });
  51. </script>
  52. </head>
  53. <body>
  54. <div>
  55. 省份：
  56. <select id="provinces">
  57. <option value="">请选择省份</option>
  58. </select>
  59. 市：
  60. <select id="citys">
  61. <option value="">请选择市</option>
  62. </select>
  63. 县：
  64. <select id="countys">
  65. <option value="">请选择县</option>
  66. </select>
  67. </div>
  68. </body>
  69. </html>

第二步：建立一个处理请求的PHP文件，如下：

  1. <?php
  2. require_once './Config/config.php';
  3. require_once './plugins/DBHelper.php';
  4. $type = isset($_GET["type"]) ? $_GET["type"] : "";
  5. $parent_id = isset($_GET["parent_id"]) ? $_GET["parent_id"] : "";
  6. // 链接数据库
  7. if ($type == "" || $parent_id == "") {
  8. exit(json_encode(array("flag" => false, "msg" => "查询类型错误")));
  9. } else {
  10. // 链接数据库
  11. $db = new DBHelper("localhost", "root", "root", "region");
  12. $provinces = $db->getSomeResult("global_region", "region_id,region_name", "parent_id={$parent_id} and region_type={$type}");
  13. $provinces_json = json_encode($provinces);
  14. exit($provinces_json);
  15. }
  16. ?>

第三步：其实这一步也是前提，就是要在mysql数据库中建一个地区表，此表结构简单，但是数据很多，大概3千多条，先列出表结构，具体数据请看代码附件。

  1. CREATE TABLE `global_region` (
  2. `region_id` smallint(5) unsigned NOT NULL AUTO_INCREMENT,
  3. `parent_id` smallint(5) unsigned NOT NULL DEFAULT '0',
  4. `region_name` varchar(120) NOT NULL DEFAULT '',
  5. `region_type` tinyint(1) NOT NULL DEFAULT '2',
  6. PRIMARY KEY (`region_id`),
  7. KEY `parent_id` (`parent_id`),
  8. KEY `region_type` (`region_type`)
  9. ) ENGINE=MyISAM AUTO_INCREMENT=3409 DEFAULT CHARSET=utf8;

最终结果如下：

jquery+php+mysql实现Ajax省市县三级联动的更多相关文章

  1. AJAX省市县三级联动的实现

    省市县数据 本例子中省市县数据保存在MySQL数据库中,部分数据截图如下: 从数据库中读取数据 导入需要的jar包 连接池配置文件 <c3p0-config> <!-- 默认配置,如 ...

  2. AJAX省市县三级联动

    效果 开发结构参考AJAX,JSON用户校验 主要有两个核心文件 1,处理输入字符,进行后台搜索的servlet linkage.java package org.guangsoft.servlet; ...

  3. 项目总结01：JSP mysql SpringMvc下中国省市县三级联动下拉框

    JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP  mysql数据库  SpringMvc  ajax   Controller层  Service层  中国地区  省 ...

  4. jQuery - 全国省市县三级联动

    最近有空用jquery做了一个全国省市县的三级联动,在以后或许可以用的到 ,遗憾的是我还没用封装,等有空看能不能封装成一个插件 废话不多说,贴上代码: <!doctype html> &l ...

  5. 省市县三级联动 sql语句

    发现在网上的省市县三级联动大部分是mysql的.就算是sqlserver的,也不准确.于是就把mysql的给改了下,适用sqlserver.sql语句如下: CREATE TABLE Dic_Area ...

  6. php仿经典省市县三级联动

    之前有个需求要写个类似省市县三级联动的页面,于是,网上找了点资料看了下,其实原理很简单: 当我们选择一级栏目中某条记录的时候,会获取该栏目的vaule值,并发起ajax请求,后台根据这个vaule值, ...

  7. 基于Jquery实现省份、城市、区县三级联动

    前端感觉写的比较少,也是为了练手,下午没事用来写了这个三级联动,也是第一次写这东西. 据我了解,城市信息可以选择存在数据库或者直接写在前端,为了省事,我直接写在前端,下面是我的代码: <!DOC ...

  8. wex5 实战 省市县三级联动与地址薄同步

    无论是商城,还是快递,都要用到省市县三级联动,和地址薄,今天就以实战来制作,难点有3个: 1:三级联动,有wex5组件实现,相对简单,实战里对行数据进行了拼接 2:  地址薄选项,利用inputSel ...

  9. Android 省市县 三级联动（android-wheel的使用）[转]

    转载:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个控件,以为 ...

随机推荐

  1. XSS 初识

    xss(跨站脚本攻击)xss是指攻击者在网页中嵌入客户端脚本,通常是javascript编写的恶意代码,当用户使用浏览器浏览被嵌入恶意代码的网页时,恶意代码将在用户的浏览器上被解析执行.重点是“脚本” ...

  2. 解决javascript动态改变img的src属性图片不显示问题

    首先讲下这个bug的出现的情况,页面中有<a href="JavaScript:void(0)" onclick="document.getElementById( ...

  3. OpenBSD内核之引导MBR

    MBR的介绍网上很多,没错,就那个最后以0x55AA结尾的512字节的引导块,OpenBSD提供了引导MBR实现:OpenBSD在x86上的引导过程为MBR --> PBR --> boo ...

  4. Windbg使用简明指南

    第一章 准备 1.1.    环境配置 _NT_DEBUGGER_EXTENSION_PATH=C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727 _NT_SY ...

  5. Y Combinator

    常见的例子 阶乘函数: fact = (a) -> if a > 0 then a * fact(a - 1) else 1 问题的提出 如上,在fact函数中调用了fact本身,无法使用 ...

  6. JavaScript的面向对象编程（OOP）（一）——类

    在学习JavaScript面向对象的编程之前,需要知道,并了解面向对象的一些基本的常识.初学者中大多数都以为面向对象中,面向对象的编程是很重要和占据很大一部分精力.笔者在之前也是认为OOP是面向对象的 ...

  7. web前端面试题

    HTML+CSS 1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户 ...

  8. 修改Linux默认启动级别或模式的方法

    冲动的惩罚: 海阔天空: 在linux系统的7种启动级别,默认为X-Window,类似于Windows的窗口模式. 如何修改或变更linux的默认启动级别或模式呢? 以root身份进入Linux,修改 ...

  9. Laravel框架 mysql 数据库 —— 基本使用

    增删改查 配置完数据库连接,就可以使用DB类进行查询了. 查询 $results = DB::select('select * from users where id = ?', array(1)); ...

  10. C盘更改文件夹权限

    现象:点“安全”添加用户并允许所有权限后,点击“应用”,弹出“无法保存对xxxxx权限所在的更改.拒绝访问”对话框 解决方法:点击“安全”-->"高级"-->“所有者” ...