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. jquery工具类函数

    1,获取浏览器的名称与版本信息 在jquery中,通过$.browser对象可以获取浏览器的名称和版本信息,如$.browser.chrome为true,表示当前为chrome浏览器,$.broese ...

  2. 学习PYTHON之路， DAY 7 - PYTHON 基础 7 (面向对象基础)

    面向对象三大特性 一.封装 封装,顾名思义就是将内容封装到某个地方,以后再去调用被封装在某处的内容. 所以,在使用面向对象的封装特性时,需要: 将内容封装到某处 从某处调用被封装的内容 第一步:将内容 ...

  3. C# 将容器内容转成图片导出

    ///   将容器内容转成图片导出,这里的controller就是this         /// </summary>         private void OutTheContro ...

  4. Excel学习技巧

    ctrl+R 初始化信息 ctrl+T 创建表列 ctrl+o 保存文件

  5. Install Sublime Text 3

    $ sudo add-apt-repository ppa:webupd8team/sublime-text-3 $ sudo apt-get update $ sudo apt-get instal ...

  6. [字符哈希] POJ 3094 Quicksum

    Quicksum Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 16488   Accepted: 11453 Descri ...

  7. 将已有项目提交到github/从github上pull到本地

    去自己的工作分支$ git checkout work 工作.... 提交工作分支的修改$ git commit -a 回到主分支$ git checkout master 获取远程最新的修改,此时不 ...

  8. 《JavaScript高级程序设计》读书笔记--前言

    起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的 ...

  9. win10 内测14352 加入了容器 和docker新功能，想体验的赶快升级

    原来只在server2016上有,现在加入到win0内测版了windows 容器提供了两种级别的隔离技术,分别是Windows Server container  和Hyper-V Container ...

  10. oracle 数据库信息查询

    /*查询当前用户表信息/ select A.column_name    字段名, A.data_type      数据类型, A.data_length    长度, A.data_precisi ...