关于php+mysql+ajax省市区三级联动菜单，求帮助

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于php+mysql+ajax省市区三级联动菜单，求帮助相关的知识，希望对你有一定的参考价值。

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

index.html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>省市区三级联动</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<script src="scripts/thumbnails.js" type="text/javascript"></script>
</head>

 thumbnails.js代码：

window.onload = getProvince;


function createRequest() //Ajax于PHP交互需要对象

  try 

    request = new XMLHttpRequest();//创建一个新的请求对象;

   catch (tryMS) 

    try 

      request = new ActiveXObject("Msxml2.XMLHTTP");

     catch (otherMS) 

      try 

        request = new ActiveXObject("Microsoft.XMLHTTP");

       catch (failed) 

        request = null;

      

    

  

  return request;




function sech(id) //省市改变时触发，select的onchange事件


    var aa = document.getElementById(id);

if(id=="sheng")

      getCity(aa.value);//这里aa.value为省的id



if(id=="shi")



getCounty(aa.value);//这里aa.value为市的id







function getProvince() //获取所有省

  request = createRequest();

  if (request == null) 

    alert("Unable to create request");

    return;

  

  var url= "getDetails.php?ID=0";//ID=0时传递至PHP时让其获取所有省

  request.open("GET", url, true);

  request.onreadystatechange = displayProvince; //设置回调函数

  request.send(null);    //发送请求




function getCity(id)//获取省对应的市

  request = createRequest();

  if (request == null) 

    alert("Unable to create request");

    return;

  

  var url= "getDetails.php?ID=" + escape(id);

  request.open("GET", url, true);

  request.onreadystatechange = displayCity;

  request.send(null);




function getCounty(id)//获取市对应的区

  request = createRequest();

  if (request == null) 

    alert("Unable to create request");

    return;

  

  var url= "getDetails.php?ID=" + escape(id);

  request.open("GET", url, true);

  request.onreadystatechange = displayCounty;

  request.send(null);




 

function displayProvince() //将获取的数据动态增加至select

  if (request.readyState == 4) 

    if (request.status == 200) 

  var a=new Array;

var b=request.responseText;//将PHP返回的数据赋值给b

 a=b.split(",");//通过","将这一数据保存在数组a中

  document.getElementById("sheng").length=1;

  var obj=document.getElementById("sheng');  

  for(i=0;i

      obj.options.add(new Option(a[i],i+1)); //动态生成OPTION加到select中，第一个参数为Text,第二个参数为Value值.


    

  




 

function displayCity() //将获取的数据动态增加至select

  if (request.readyState == 4) 

    if (request.status == 200) 

  var a=new Array;

var b=request.responseText;

 a=b.split(",");

  document.getElementById("shi").length=1;//重新选择

  document.getElementById("xian").length=1;//重新选择

if(document.getElementById("sheng").value!="province")

  var obj=document.getElementById('shi');  

  for(i=0;i

      obj.options.add(new Option(a[i], document.getElementById("sheng").value*100+i+1)); //ocument.getElementById("sheng").value*100+i+1对应的是市的ID。




    

  




function displayCounty() //将获取的数据增加至select

  if (request.readyState == 4) 

    if (request.status == 200) 

  var a=new Array;

var b=request.responseText;

 a=b.split(",");

 document.getElementById("xian").length=1;

if(document.getElementById("sheng").value!="province"&&document.getElementById("shi").value!="city")

  var obj=document.getElementById('xian');  

  for(i=0;i

      obj.options.add(new Option(a[i],i+1001)); 




    

  

getDetails.php代码：

<?php

header("Content-Type: text/html; charset=gb2312");

$conn = new COM("ADODB.Connection") or die("Cannot start ADO");

$connstr = "Provider=SQLOLEDB;Persist Security Info=False;User ID=root;Password=123456;Initial Catalog=area;Data Source=localhost";
 
if($_REQUEST['ID']==0)//获得省列表
$conn->Open($connstr); //建立数据库连接
$sqlstr = "select name from Province"; //设置查询字符串
$rs = $conn->Execute($sqlstr); //执行查询获得结果
$num_cols = $rs->Fields->Count(); //得到数据集列数
$Province=array();
$i=0;
while (!$rs->EOF) 
$Province[$i]=$rs->Fields['name']->Value.",";
$rs->MoveNext();
$i++;

foreach($Province as $val)
echo $val;
$conn->Close();
$rs = null;
$conn = null;

if($_REQUEST['ID']>0&&$_REQUEST['ID']<35)//获得省对应的市列表
$conn->Open($connstr); //建立数据库连接
$sqlstr = "select name from City where cid=".$_REQUEST['ID']; //设置查询字符串
$rs = $conn->Execute($sqlstr); //执行查询获得结果
$num_cols = $rs->Fields->Count(); //得到数据集列数
$City=array();
$i=0;
while (!$rs->EOF) 
$City[$i]=$rs->Fields['name']->Value.",";
$rs->MoveNext();
$i++;

foreach($City as $val)
echo $val;
$conn->Close();
$rs = null;
$conn = null;

if($_REQUEST['ID']>100)//获得省市对应的县列表
$conn->Open($connstr); //建立数据库连接
$sqlstr = "select name from County where cid=".$_REQUEST['ID']; //设置查询字符串
$rs = $conn->Execute($sqlstr); //执行查询获得结果
$num_cols = $rs->Fields->Count(); //得到数据集列数
$County=array();
$i=0;
while (!$rs->EOF) 
$County[$i]=$rs->Fields['name']->Value.",";
$rs->MoveNext();
$i++;

foreach($County as $val)
echo $val;
$conn->Close();
$rs = null;
$conn = null;

?>

数据库设计，表格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效果：

完成后效果：

 参考技术A 在软件使用前是会有这个方面的说明的

ajax(省，市，县)三级联动

下面我们用Jquery，ajax,做一个省，市，县的三级联动：



下面是我做三级联动下拉的步骤以及逻辑


第一步：先做一个省市区表格
第二步：建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息，里面嵌入jquery-1.11.2.min.js和自己封装的三联动省市区的方法
第三步：写封装方法用JS
第四步：做个纯php处理页面，这个页面处理传过来的任何代号


首先我们要建立数据库：




这就是包含省，市，县的数据库，


下面我们就写主页面：sanji.php：




 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>Document</title>
 6     <script src="jquery-1.11.2.min.js"></script>
 7     <script src="sanjiliandong.js"></script>
 8 </head>
 9 <body>
10     <div id="sanjiliandong">
11         <!--在这里使用三级联动插件-->
12     </div>
13 </body>
14 </html>




然后就是js文件：




  1 // JavaScript Document
  2 $(document).ready(function(e){
  3     //向div里面仍三个下拉
  4      var str = "<select id=\'sheng\'></select><select id=\'shi\'></select><select id=\'qu\'></select>";
  5     $("#sanjiliandong").html(str);//三个下拉显示
  6              
  7      
  8     //当省选中的话市也会跟着变去也会变。市和区都会加载一遍
  9     FillSheng();//省
 10     FillShi();//市
 11     FillQu();//区
 12     //给省加点击事件
 13     $("#sheng").change(function(){
 14             FillShi();//市
 15             FillQu();//区
 16         })
 17     //给市加点击事件
 18     $("#shi").change(function(){
 19             FillQu();//区
 20         })
 21 });
 22 //做三个方法分别为省市区
 23 //填充省的方法，如何在表里查询 出省的代号例如：北京0001、天津0001,中国下面所有省都是0001开头的
 24 function FillSheng()
 25 {
 26     var pcode = "0001";
 27     $.ajax({
 28         async:false,
 29         url:"chuli.php",
 30         data:{pcode:pcode},
 31         type:"POST",
 32         dataType:"TEXT",
 33         success: function(data){
 34             //返回数据,根据行于行之间的分隔符来拆,拆完之后会返回一数组/行的数组
 35             var hang = data.split("|");
 36             
 37             var str = "<option value=\'\' >请选择地区</option>";
 38             //把行的数组遍历下用for循环...length长度
 39             for(var i=0;i<hang.length;i++)
 40             {
 41                 //把行的索引i在拆下.列与列的分隔符再拆
 42                 var lie = hang[i].split("^");//这是列的数组
 43                 str += "<option value=\'"+lie[0]+"\'>"+lie[1]+"</option>";
 44                 
 45                 $("#sheng").html(str);
 46             }
 47         }
 48     });
 49 }
 50 //填充市的方法
 51 function FillShi()
 52 {
 53     var pcode = $("#sheng").val();
 54     $.ajax({
 55         async:false,//****
 56         url:"chuli.php",
 57         data:{pcode:pcode},
 58         type:"POST",
 59         dataType:"TEXT",
 60         success: function(data){
 61             //返回数据,根据行于行之间的分隔符来拆,拆完之后会返回一数组/行的数组
 62             var hang = data.split("|");
 63             
 64             var str = "<option value=\'\' >请选择城市</option>";
 65             //把行的数组遍历下用for循环...length长度
 66             for(var i=0;i<hang.length;i++)
 67             {
 68                 //把行的索引i在拆下.列与列的分隔符再拆
 69                 var lie = hang[i].split("^");//这是列的数组
 70                 str += "<option value=\'"+lie[0]+"\'>"+lie[1]+"</option>";
 71             }
 72             $("#shi").html(str);
 73         }
 74     });
 75 }
 76 //填充区的方法
 77 function FillQu()
 78 {
 79     var pcode = $("#shi").val();
 80     $.ajax({
 81         async:false,
 82         url:"chuli.php",
 83         data:{pcode:pcode},
 84         type:"POST",
 85         dataType:"TEXT",
 86         success: function(data){
 87             //返回数据,根据行于行之间的分隔符来拆,拆完之后会返回一数组/行的数组
 88             var hang = data.split("|");
 89             
 90             var str = "<option value=\'\' >请选择乡县</option>";
 91             //把行的数组遍历下用for循环...length长度
 92             for(var i=0;i<hang.length;i++)
 93             {
 94                 //把行的索引i在拆下.列与列的分隔符再拆
 95                 var lie = hang[i].split("^");//这是列的数组
 96                 str += "<option value=\'"+lie[0]+"\'>"+lie[1]+"</option>";
 97                 
 98                 $("#qu").html(str);
 99             }
100         }
101     });
102 }




之后是查询数据库的处理文件：




1 <?php
2  //处理页面只有一个功能处理传过来的所有代号（省、市、区。。。）
3  include("DBDA.class.php");
4  $db = new DBDA();
5  $pcode = $_POST["pcode"];//取到赋值代号
6  $sql = "select * from chinastates where parentareacode=\'{$pcode}\'";
7 echo $db->StrQuery($sql);




显示效果如下：




 


 这就是我们要做的省，市，县的三级联动。在这里我们重点强调一下一定要做好逻辑关系，想好了在去动手写代码，要不然容易混乱，这样的话就只能从头开始。


以上是关于关于php+mysql+ajax省市区三级联动菜单，求帮助的主要内容，如果未能解决你的问题，请参考以下文章
 

 用php+mysql+ajax+jquery做省市区三级联动


 javaweb--json--ajax--mysql实现省市区三级联动（附三级联动数据库）


 ajax实现三级联动下拉菜单


 一张表 怎么 jquery省市区三级联动


 关于在smarty中实现省市区三级联动


 asp ajax三级菜单联动国省市数据库