当前位置：Gxlcms > PHP教程 > php+Mysql+Ajax+JS实现省市区三级联动实例代码

php+Mysql+Ajax+JS实现省市区三级联动实例代码

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

最近做了个项目，需要用到省市区三级联动，上网翻了不少资料，于是有了下面的思路和代码

基本思想就是：在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息，代码有点长，但很多都是类似的，例如JS中省、市、区获取方法类似，PHP中通过参数不同执行不同的select语句。

index.html代码：

代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>省市区三级联动</title>
  6. <META http-equiv=Content-Type content="text/html; charset=gb2312">
  7. <script src="scripts/thumbnails.js" type="text/javascript"></script>
  8. </head>
  9. <body>
  10. <p id="description">
  11. <select style="width:100px; " onchange="sech(this.id)" id="sheng">
  12. <option value="province">请选择省份</option>
  13. </select>
  14. <select onchange="sech(this.id)" id="shi">
  15. <option value="city">请选择市区</option>
  16. </select>
  17. <select id="xian">
  18. <option value="county">请选择县乡</option>
  19. </select>
  20. </p>
  21. </p>
  22. </body>
  23. </html>

thumbnails.js代码：

代码如下:

  1. window.onload = getProvince;
  2. function createRequest() {//Ajax于PHP交互需要对象
  3.   try {
  4.     request = new XMLHttpRequest();//创建一个新的请求对象;
  5.   } catch (tryMS) {
  6.     try {
  7.       request = new ActiveXObject("Msxml2.XMLHTTP");
  8.     } catch (otherMS) {
  9.       try {
  10.         request = new ActiveXObject("Microsoft.XMLHTTP");
  11.       } catch (failed) {
  12.         request = null;
  13.       }
  14.     }
  15.   }
  16.   return request;
  17. }
  18. function sech(id) {//省市改变时触发，select的onchange事件
  19.     var aa = document.getElementById(id);
  20. if(id=="sheng"){
  21.       getCity(aa.value);//这里aa.value为省的id
  22. }
  23. if(id=="shi")
  24. {
  25. getCounty(aa.value);//这里aa.value为市的id
  26. }
  27. }
  28. function getProvince() {//获取所有省
  29.   request = createRequest();
  30.   if (request == null) {
  31.     alert("Unable to create request");
  32.     return;
  33.   }
  34.   var url= "getDetails.php?ID=0";//ID=0时传递至PHP时让其获取所有省
  35.   request.open("GET", url, true);
  36.   request.onreadystatechange = displayProvince; //设置回调函数
  37.   request.send(null);    //发送请求
  38. }
  39. function getCity(id){//获取省对应的市
  40.   request = createRequest();
  41.   if (request == null) {
  42.     alert("Unable to create request");
  43.     return;
  44.   }
  45.   var url= "getDetails.php?ID=" + escape(id);
  46.   request.open("GET", url, true);
  47.   request.onreadystatechange = displayCity;
  48.   request.send(null);
  49. }
  50. function getCounty(id){//获取市对应的区
  51.   request = createRequest();
  52.   if (request == null) {
  53.     alert("Unable to create request");
  54.     return;
  55.   }
  56.   var url= "getDetails.php?ID=" + escape(id);
  57.   request.open("GET", url, true);
  58.   request.onreadystatechange = displayCounty;
  59.   request.send(null);
  60. }
  61.  
  62. function displayProvince() {//将获取的数据动态增加至select
  63.   if (request.readyState == 4) {
  64.     if (request.status == 200) {
  65.   var a=new Array;
  66. var b=request.responseText;//将PHP返回的数据赋值给b
  67.  a=b.split(",");//通过","将这一数据保存在数组a中
  68.   document.getElementById("sheng").length=1;
  69.   var obj=document.getElementById("sheng');  
  70.   for(i=0;i
  71.       obj.options.add(new Option(a[i],i+1)); //动态生成OPTION加到select中，第一个参数为Text,第二个参数为Value值.
  72.     }
  73.   }
  74. }
  75.  
  76. function displayCity() {//将获取的数据动态增加至select
  77.   if (request.readyState == 4) {
  78.     if (request.status == 200) {
  79.   var a=new Array;
  80. var b=request.responseText;
  81.  a=b.split(",");
  82.   document.getElementById("shi").length=1;//重新选择
  83.   document.getElementById("xian").length=1;//重新选择
  84. if(document.getElementById("sheng").value!="province"){
  85.   var obj=document.getElementById('shi');  
  86.   for(i=0;i
  87.       obj.options.add(new Option(a[i], document.getElementById("sheng").value*100+i+1)); //ocument.getElementById("sheng").value*100+i+1对应的是市的ID。
  88. }
  89.     }
  90.   }
  91. }
  92. function displayCounty() {//将获取的数据增加至select
  93.   if (request.readyState == 4) {
  94.     if (request.status == 200) {
  95.   var a=new Array;
  96. var b=request.responseText;
  97.  a=b.split(",");
  98.  document.getElementById("xian").length=1;
  99. if(document.getElementById("sheng").value!="province"&&document.getElementById("shi").value!="city"){
  100.   var obj=document.getElementById('xian');  
  101.   for(i=0;i
  102.       obj.options.add(new Option(a[i],i+1001)); 
  103. }
  104.     }
  105.   }
  106. }

getDetails.php代码：

代码如下:

  1. <?php
  2. header("Content-Type: text/html; charset=gb2312");
  3. $conn = new COM("ADODB.Connection") or die("Cannot start ADO");
  4. $connstr = "Provider=SQLOLEDB;Persist Security Info=False;User ID=root;Password=123456;Initial Catalog=area;Data Source=localhost";
  5. if($_REQUEST['ID']==0){//获得省列表
  6. $conn->Open($connstr); //建立数据库连接
  7. $sqlstr = "select name from Province"; //设置查询字符串
  8. $rs = $conn->Execute($sqlstr); //执行查询获得结果
  9. $num_cols = $rs->Fields->Count(); //得到数据集列数
  10. $Province=array();
  11. $i=0;
  12. while (!$rs->EOF) {
  13. $Province[$i]=$rs->Fields['name']->Value.",";
  14. $rs->MoveNext();
  15. $i++;
  16. }
  17. foreach($Province as $val)
  18. echo $val;
  19. $conn->Close();
  20. $rs = null;
  21. $conn = null;
  22. }
  23. if($_REQUEST['ID']>0&&$_REQUEST['ID']<35){//获得省对应的市列表
  24. $conn->Open($connstr); //建立数据库连接
  25. $sqlstr = "select name from City where cid=".$_REQUEST['ID']; //设置查询字符串
  26. $rs = $conn->Execute($sqlstr); //执行查询获得结果
  27. $num_cols = $rs->Fields->Count(); //得到数据集列数
  28. $City=array();
  29. $i=0;
  30. while (!$rs->EOF) {
  31. $City[$i]=$rs->Fields['name']->Value.",";
  32. $rs->MoveNext();
  33. $i++;
  34. }
  35. foreach($City as $val)
  36. echo $val;
  37. $conn->Close();
  38. $rs = null;
  39. $conn = null;
  40. }
  41. if($_REQUEST['ID']>100){//获得省市对应的县列表
  42. $conn->Open($connstr); //建立数据库连接
  43. $sqlstr = "select name from County where cid=".$_REQUEST['ID']; //设置查询字符串
  44. $rs = $conn->Execute($sqlstr); //执行查询获得结果
  45. $num_cols = $rs->Fields->Count(); //得到数据集列数
  46. $County=array();
  47. $i=0;
  48. while (!$rs->EOF) {
  49. $County[$i]=$rs->Fields['name']->Value.",";
  50. $rs->MoveNext();
  51. $i++;
  52. }
  53. foreach($County as $val)
  54. echo $val;
  55. $conn->Close();
  56. $rs = null;
  57. $conn = null;
  58. }
  59. ?>

数据库设计，表格Province表，City表，County表。
要求：Province表需要id和name，id建议从1至34，例如北京id为1，广东id为2，以此类推；
City表需要id,name和cid，id为cid*100+1，cid为该市的上级，例如深圳的上级为广东省,cid为2的话，深圳的id就是201，以此类推。
County表需要id,name和cid，因为是三级的关系，id可以随意，建议从10001开始自增。cid为所在上级，例如宝安区的cid为201，龙岗区的cid也为201；

截图：

HTML效果：

完成后效果：

备注：PHP是服务器端的，建议发布网站后通过ip调试。

以上就是php+Mysql+Ajax+JS实现省市区三级联动实例代码的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

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