当前位置：Gxlcms > PHP教程 > 省市区三级联动功能实现的示例（php+MySql+Ajax+jQuery）

省市区三级联动功能实现的示例（php+MySql+Ajax+jQuery）

时间：2021-07-01 10:21:17 帮助过：8人阅读

下面小编就为大家带来一篇使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

要求：写一个省市区（或者年月日）的三级联动，实现地区或时间的下拉选择。

实现技术：php ajax

实现：省级下拉变化时市下拉区下拉跟着变化，市级下拉变化时区下拉跟着变化。

使用chinastates表查询

Ajax加载数据

1.这是chinastates表

2.做一个简单php：Ajax_eg.php


  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title></title>
  6.   <script src="bootstrap/js/jquery-1.11.2.min.js"></script>
  7.  </head>
  8.  <style>
  9.  .sanji{
  10.   margin-left: 550px;
  11.   margin-top: 150px;
  12.  }
  13.  </style>
  14.  <body>
  15.   <p class="sanji"> </p>
  16.  </body>
  17. </html>

3.根据前一个页面做jquery：Ajax_ssq.js


  1. // JavaScript Document
  2. //当页面内容都加载完才执行
  3. $(document).ready(function(e) {
  4.  //加载三个下拉列表
  5.  $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
  6.  
  7.  //加载显示数据
  8.  //1.加载省份
  9.  LoadSheng();
  10.  //2.加载市
  11.  LoadShi();
  12.  //3.加载区
  13.  LoadQu();
  14.  //当省份选中变化，重新加载市和区
  15.  $("#sheng").change(function(){ //当元素的值发生改变时，会发生 change 事件,该事件仅适用于文本域（text field），以及 textarea 和 select 元素。
  16.   //加载市
  17.    LoadShi();
  18.   //加载区
  19.    LoadQu();
  20.   
  21.   })
  22.  
  23.  //当市选中变化，重新加载区
  24.  $("#shi").change(function(){
  25.   //加载区
  26.   LoadQu();
  27.   })
  28.   
  29.  
  30. });
  31. //加载省份信息
  32. function LoadSheng()
  33. {
  34.  //取父级代号
  35.  var pcode ="0001";
  36.  
  37.  //根据父级代号查数据
  38.  $.ajax({
  39.     //取消异步，也就是必须完成上面才能走下面
  40.     async:false,
  41.     url:"load.php",
  42.     data:{pcode:pcode},
  43.     type:"POST",
  44.     dataType:"JSON",
  45.     success: function(data){
  46.       var str="";
  47.       //遍历数组，把它放入sj
  48.       for(var k in data){
  49.        str=str+"<option value='"+data[k].[0]+"'>"+data[k].[1]+"</option>";
  50.       }
  51.       $("#sheng").html(str);      
  52.     }      
  53.   }); 
  54. }
  55. //加载市信息
  56. function LoadShi()
  57. {
  58.  //取父级代号
  59.  var pcode =$("#sheng").val();
  60.  
  61.  //根据父级代号查数据
  62.  $.ajax({
  63.     //取消异步，也就是必须完成上面才能走下面
  64.     async:false,
  65.     url:"load.php",
  66.     data:{pcode:pcode},
  67.     type:"POST",
  68.     dataType:"JSON",
  69.     success: function(data){
  70.       var str="";
  71.       //遍历数组，把它放入sj
  72.       for(var k in data){
  73.        str=str+"<option value='"+data[k].[0]+"'>"+data[k].[0]+"</option>";
  74.       }
  75.       $("#shi").html(str);      
  76.     }      
  77.   }); 
  78. }
  79. //加载区信息
  80. function LoadQu()
  81. {
  82.  //取父级代号
  83.  var pcode =$("#shi").val();
  84.  
  85.  //根据父级代号查数据
  86.  $.ajax({
  87.     //不需要取消异步
  88.     url:"load.php",
  89.     data:{pcode:pcode},
  90.     type:"POST",
  91.     dataType:"JSON",
  92.     success: function(data){
  93.       var str="";
  94.       //遍历数组，把它放入sj
  95.       for(var k in data){
  96.        str=str+"<option value='"+data[k].[0]+"'>"+data[k].[1]+"</option>";       
  97.       }
  98.       $("#qu").html(str);      
  99.     }      
  100.   }); 
  101. }

4.再把数据库连接起来 :load.php,把DBDA重新加载一个方法：JsonQuery


  1. <?php
  2. $pcode = $_POST["pcode"];
  3. require_once "./DBDA.class.php";
  4. $db = new DBDA();
  5. $sql = "select * from chinastates where parentareacode='{$pcode}'";
  6. echo $db->JsonQuery($sql,0);

封装类


  1. <?php 
  2. class DBDA{
  3.  public $host="localhost";
  4.  public $uid="root";
  5.  public $pwd="";
  6.  public $dbname="0710_info";
  7.  /* 
  8.   query方法:执行用户给的sql语句,并返回相应的结果
  9.   $sql:用户需要执行的sql语句
  10.   $type:用户需要执行的sql语句的类型
  11.   return:如果是增删语句改返回true或false,如果是查询语句返回二维数组
  12.   */
  13.  public function query($sql,$type=1){//默认true为增删改
  14.   $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
  15.   if(mysqli_connect_error()){
  16.    return "连接失败!"; 
  17.   }
  18.   $result = $db->query($sql);
  19.   if($type==1){
  20.    return $result;//增删改语句返回true或false
  21.   }else{
  22.    return $result->fetch_all();//查询语句返回二维数组
  23.   } 
  24.  }
  25.  //此方法用于ajax中用于对取出的数据（二维数组）进行拼接字符串处理
  26.  public function StrQuery($sql,$type=1){
  27.   $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
  28.   if(mysqli_connect_error()){
  29.    return "连接失败!"; 
  30.   }
  31.   $result = $db->query($sql);
  32.   if($type==1){
  33.    return $result;//增删改语句返回true或false
  34.   }else{
  35.    $arr = $result->fetch_all();//查询语句返回二维数组
  36.    $str = "";
  37.    foreach($arr as $v){
  38.     $str = $str.implode("^", $v)."|";
  39.    }
  40.    $str = substr($str, 0,strlen($str)-1);
  41.    return $str;
  42.   } 
  43.  } 
  44.  //此方法用于ajax中用于返回为json数据类型时使用
  45.  public function JsonQuery($sql,$type=1){
  46.   $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
  47.   if(mysqli_connect_error()){
  48.    return "连接失败!"; 
  49.   }
  50.   $result = $db->query($sql);
  51.   if($type==1){
  52.    return $result;//增删改语句返回true或false
  53.   }else{
  54.    $arr = $result->fetch_all();//查询语句返回二维(关联)数组
  55.    return json_encode($arr);//将数组转换成json
  56.   } 
  57.  }
  58. }

实现效果：

以上就是省市区三级联动功能实现的示例（php+MySql+Ajax+jQuery）的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！