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. IIS 7.5最新解析漏洞

    IIS7.5解析漏洞 http://www.cnk0n9.com/fckeditor/editor/fckeditor.html, 上传图片,浏览,上传一个aspx的一句话木马,名字为:a.aspx. ...

  2. php知识分享

                                                                      PHP 获取ip地址代码汇总                     ...

  3. css个人总结

    1.什么是css,指的是叠层样式表,控制网页的的外观显示. 2.引入css的三种方式,外部链接,内部链接,内联,分别的语法是,<link rel="stylesheec" t ...

  4. JAVA 多线程随笔 (二) sleep, yield, join, wait 和notify

    这里先说明一下锁对象,如果一个类比如Person里的方法都有synchronized来修饰,那么每一个方法的锁对象就是Person的一个实例person. 锁对象也可以针对某个特定的实例, 比如syn ...

  5. boost::spirit unicode 简用记录

    本文简单记录使用boost::spirit解析有中文关键字的字符串并执行响应动作,类似于语法分析+执行. 关键字:字符串解析 boost::spirit::qi::parse qi::unicode: ...

  6. web前端面试题

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

  7. asp.net自己创建的app_code文件夹中的类不能访问的解决办法

    在Web应用程序中不能通过右键项目-〉”添加“-〉”添加ASP.NET文件夹“方式添加 .因为Web应用程序中App_Code就不存在 .不过可以通过手动的方式创建,添加一个文件夹命名为App_Cod ...

  8. nginx 模块讲解

    1. 通用配置选项: --prefix=<path>          指定Nginx的安装路径,所有其他的路径都要依赖于该选项 --sbin-path=<path>     ...

  9. 微信APP支付服务端开发Java版（一）

    一.准备工作 去微信开发者中心下载(扫码支付,里面的大部分代码是可以用的) https://pay.weixin.qq.com/wiki/doc/api/micropay.php?chapter=11 ...

  10. 用wget下载整个目录

    wget -c -r -np -P files www.test.com/dir/src -c 断点续传 -r 递归下载 -np 不下载父附录 -nd 不建立目录,若无此选项,将按照网站目录结构创建目 ...