脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → PHP编程 → php实例 → 省市区三级联动

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

 更新时间：2014年05月23日 10:50:46   作者：  
最近做了个项目，需要用到省市区三级联动，上网翻了不少资料，于是有了下面的思路和代码

基本思想就是：在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是服务器端的，建议发布网站后通过ip调试。

您可能感兴趣的文章:

相关文章

  • php 购物车完整实现代码

    php 购物车完整实现代码

    本文介绍一个php实现的购物车代码，功能实现比较完整，实现了购物车、订货人信息、会员价等功能，还是不错的，有需要的朋友，可以参考下
    2014-06-06
  • 分享10段PHP常用代码

    分享10段PHP常用代码

    本文汇集PHP开发中经常用到的时段代码，包括Email、解压缩、64位编码、解析JSON等，对php常用代码感兴趣的朋友参考下
    2015-11-11
  • Django中的cookie与session操作实例代码

    Django中的cookie与session操作实例代码

    本文通过示例代码给大家介绍了Django中的cookie与session操作，需要的朋友参考下吧
    2017-08-08
  • PHP session文件独占锁引起阻塞问题解决方法

    PHP session文件独占锁引起阻塞问题解决方法

    这篇文章主要介绍了PHP session文件独占锁引起阻塞,本文讲解PHP使用默认文件会话处理器时容易导致的阻塞问题解决方法,需要的朋友可以参考下
    2015-05-05
  • 使用Yii2实现主从数据库设置

    使用Yii2实现主从数据库设置

    大家应该都知道，当项目做大了，数据库主从还是不可少的。使用Yii框架开发，如何设置数据库的主从呢？其实很简单。下面这篇文章就给大家详细介绍了使用Yii2实现主从数据库设置的方法，文中介绍的很详细，相信对大家的理解和学习很有帮助，下面来一起学习学习吧。
    2016-11-11
  • laravel中的fillable和guarded属性详解

    laravel中的fillable和guarded属性详解

    今天小编就为大家分享一篇laravel中的fillable和guarded属性详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 新浪微博API开发简介之用户授权(PHP基础篇)

    新浪微博API开发简介之用户授权(PHP基础篇)

    己在开发和学习的过程中，感觉虽然没有太大难度，但还是有一些问题是需要我们注意的，今天就我在开发和学习的过程中，简单的对利用PHP进行新浪微博API开发的内容进行一个整理和说明
    2011-09-09
  • PHP Include文件实例讲解

    PHP Include文件实例讲解

    在本文里我们给大家分享了关于PHP Include文件实例内容，对此知识点有兴趣的读者们学习下。
    2019-02-02
  • 全世界最小的php网页木马一枚 附PHP木马的防范方法

    全世界最小的php网页木马一枚 附PHP木马的防范方法

    php网页木马代码，大家可以看下自己的网站里面是不是有这样的代码，注意网站安全用mcafee限制w3wp.exe生成php或者asp文件。并在php.ini中设置一下。
    2009-10-10
  • PHP HTTP 认证实例详解

    PHP HTTP 认证实例详解

    这篇文章主要介绍了PHP HTTP 认证实例详解的相关资料,这里附有实现代码，及对认证的知识做一个详细的介绍说明，需要的朋友可以参考下
    2016-11-11

最新评论