PHP+Mysql+Ajax+JS实现省市区三级联动

程序员文章站 2022-06-30 10:49:09

基本思想就是：在js动态创建select控件的option,通过ajax获取在php从sql数据库获取的省市区信息，代码有点长，但很多都是类似的，例如js中省、市、区获取方...

基本思想就是：在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>

<body>

<div id="description">
<select style="width:100px; " onchange="sech(this.id)" id="sheng">
<option value="province">请选择省份</option>
</select>
<select onchange="sech(this.id)" id="shi">
<option value="city">请选择市区</option>
</select>
<select id="xian">
<option value="county">请选择县乡</option>
</select>
</div>

</div>
</body>
</html>

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效果：

PHP+Mysql+Ajax+JS实现省市区三级联动