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. php 使用curl模拟登录人人(校内)网

    $login_url = 'http://passport.renren.com/PLogin.do'; $post_fields['email'] = 'XXXX';$post_fields['pa ...

  2. 好用的Magento一步支付插件One Step Checkout免费版

    Magento免费版一步支付插件地址:http://www.magentocommerce.com/magento-connect/one-page-checkout.html‎ 直接引用KEY:ht ...

  3. [前端神器]handlebars+require基本使用方法

    最近在某网站看到了handlebars.js,出于好奇就百度了下这是神马玩意,结果让我很是欢喜,于是就开始自学下,handlebars就几个方法,蛮简单,言归正传! 以下是基本教学逻辑演示,会附完整代 ...

  4. 转，Oracle中关于处理小数点位数的几个函数，取小数位数，Oracle查询函数

    关于处理小数点位数的几个oracle函数() 1. 取四舍五入的几位小数 select round(1.2345, 3) from dual; 结果:1.235 2. 保留两位小数,只舍 select ...

  5. Joomla软件功能介绍与开源程序大比拼Joomla,wordpress,Drupal哪个好？

    Joomla 软件功能介绍:    Joomla!是一套在国外相当知名的内容管理系统 (Content Management System, CMS),它属于Portal(企业入口网站)类型,顾名思义 ...

  6. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  7. 利用Excel表格中的宏，轻松提取首字母

    1.启动Excel 2003(其它版本请仿照操作),打开相应的工作表: 2 2.执行“工具→宏→Visual Basic编辑器”命令(或者直接按“Alt+F11”组合键),进入Visual Basic ...

  8. vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...

  9. Maven的配置

  10. Imagick 缩放图片和实现模糊

    Imagick功能相当的多,只是还不稳定,我下面的程序能够运行,但是会出现内存错误,但我们要的图片还是能够得到. 弄这个的原因是,一个客户要求在一个appcan的应用里面实现一个页面的背景图的缩放.调 ...