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. js页面跳转(含框架跳转)整理

    js方式的页面跳转1.window.location.href方式    <script language="javascript" type="text/java ...

  2. 关于offsetWidth,offsetHeight,offsetTop,offsetLeft和二维数组的声明

    offsetWidth,offsetHeight,offsetTop,offsetLeft 为只读状态,返回的值是int形式 只读形式即不能通过修改其值的大小. 想要修改某元素的这些值的大小(widt ...

  3. VMware中linux配置1-安装VMware tool 共享文件夹

    linux:ubuntu 14 安装Linux,使用的ubuntu-14.04.1-desktop-amd64.iso 安装的,这个就不写了. 为了在linux中访问windows的目录,需要安装VM ...

  4. ArcGIS Add-in插件开发从0到1及实际案例分享

    同学做毕设,要求我帮着写个ArcGIS插件,实现功能为:遍历所有图斑,提取相邻图斑的公共边长及其他属性(包括相邻图斑的ID),链接到属性表中.搞定后在这里做个记录.本文分两大部分: ArcGIS插件开 ...

  5. MVC中获取来自控制器名称与动作的方法

    #region 获取控制器名称与动作 protected void GetNameSpace() { var nameSpace = this.RouteData.Values["contr ...

  6. mydumper linux mysql 备份利器

    1 官网 https://launchpad.net/ 2 安装使用参考网站   http://www.cnblogs.com/digdeep/p/4925560.html

  7. 无废话SharePoint入门教程三[创建网站集和网站]

    一.前言 前两篇文章讲解了什么是SharePoint,并且介绍了在SharePoint中一些常用的概念.但概念终究是概念,我们还是要脚踏实地的去动手实践.下面的文章对于了解SharePoint的人来说 ...

  8. blade and soul zone overview

    The world of Blade and Soul, is a vast extension of land containing two continents (the Southern Con ...

  9. 立体角的单位——立体弧度（sr）

    国际单位制(SI)中,关于物理量 发光强度 的介绍: 1cd(坎德拉)为一光源在给定方向的发光强度,该光源发出频率为540×1012Hz(赫兹)的单色辐射,且在此方向上的辐射强度为 1/683 W/s ...

  10. Fastest Wordpress Theme -wpfast Download

    Are you in search of fastest wordpress theme to increase your product sell and conversion ,then you ...