您的位置: 首页  >  IT文章  >  jquery+php+mysql实现Ajax省市县三级联动

jquery+php+mysql实现Ajax省市县三级联动

分类: IT文章 • 2024-01-13 13:36:42

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

[html] view plain copy jquery+php+mysql实现Ajax省市县三级联动jquery+php+mysql实现Ajax省市县三级联动
  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.   
  23.                 $("#provinces").change(function() {  
  24.                     $.ajax({  
  25.                         type: "get",  
  26.                         url: "region_action.php", // type =2表示查询市  
  27.                         data: {"parent_id": $(this).val(), "type": "2"},  
  28.                         dataType: "json",  
  29.                         success: function(data) {  
  30.                             $("#citys").html("<option value=''>请选择市</option>");  
  31.                             $.each(data, function(i, item) {  
  32.                                 $("#citys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");  
  33.                             });  
  34.                         }  
  35.                     });  
  36.                 });  
  37.   
  38.                 $("#citys").change(function() {  
  39.                     $.ajax({  
  40.                         type: "get",  
  41.                         url: "region_action.php", // type =2表示查询市  
  42.                         data: {"parent_id": $(this).val(), "type": "3"},  
  43.                         dataType: "json",  
  44.                         success: function(data) {  
  45.                             $("#countys").html("<option value=''>请选择县</option>");  
  46.                             $.each(data, function(i, item) {  
  47.                                 $("#countys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");  
  48.                             });  
  49.                         }  
  50.                     });  
  51.                 });  
  52.             });  
  53.         </script>  
  54.           
  55.     </head>  
  56.     <body>  
  57.         <div>  
  58.             省份：  
  59.             <select id="provinces">  
  60.                 <option value="">请选择省份</option>  
  61.             </select>  
  62.             市：  
  63.             <select id="citys">  
  64.                 <option value="">请选择市</option>  
  65.             </select>  
  66.             县：  
  67.             <select id="countys">  
  68.                 <option value="">请选择县</option>  
  69.             </select>  
  70.         </div>  
  71.     </body>  
  72. </html>  


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

[php] view plain copy jquery+php+mysql实现Ajax省市县三级联动jquery+php+mysql实现Ajax省市县三级联动
  1. <?php  
  2.   
  3. //封装的数据操作类
  4. require_once './Config/config.php';  
  5. require_once './plugins/DBHelper.php';  
  6.   
  7. $type = isset($_GET["type"]) ? $_GET["type"] : "";  
  8. $parent_id = isset($_GET["parent_id"]) ? $_GET["parent_id"] : "";  
  9.   
  10. // 链接数据库代码（没有源文件，直接写个链接数据的代码根据条件去查地区表就可以了）  
  11. if ($type == "" || $parent_id == "") {  
  12.     exit(json_encode(array("flag" => false, "msg" => "查询类型错误")));  
  13. } else {    
  14.     // 链接数据库  
  15.     $db = new DBHelper("localhost", "root", "root", "region");  
  16.     $provinces = $db->getSomeResult("global_region", "region_id,region_name", "parent_id={$parent_id} and region_type={$type}");  
  17.     $provinces_json = json_encode($provinces);  
  18.     exit($provinces_json);  
  19. }  
  20.   
  21. ?>  

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

[sql] view plain copy jquery+php+mysql实现Ajax省市县三级联动jquery+php+mysql实现Ajax省市县三级联动
  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省市县三级联动


相关推荐