最近做了个项目，需要用到省市区三级联动，上网翻了不少资料，于是有了下面的思路和代码
基本思想就是：在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>
<p 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>
</p>
</p>
</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+mysql+ajax+js实现省市区三级联动实例代码的详细内容。