基本思想就是：在js动态创建lect控件的option,通过ajax获取在php从sql数据库获取的省市区信息，代码有点长，但很多都是类似的，例如js中省、市、区获取方法类似，php中通过参数不同执行不同的lect语句。
index.html代码：
复制代码 代码如下:
<!doctype html public “-//w3c//dtd xhtml 1.0 transitional//en”
“/d/file/titlepic/xhtml1-transitional.dtd& />
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>省市区三级联动</title>
<meta http-equiv=content-type content=”text/html; chart=gb2312″>
<script src=”scripts/thumbnails.js” type=”text/javascript”></script>
&顶岗实习报告lt;/head>
<body>
<div id=”description”>
<lect style=”width:100px; ” onchange=”ch(this.id)” id=”sheng”>
<option value=”province”>请选择省份</option>
<小学教师教学随笔/lect>
<lect onchange=”ch(this.id)” id=”shi”>
<option value=”city”>请选择市区</option>
</lect>
<lect id=”xian”>
<option value=”county”>请选择县乡</option>
</lect>
</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 ch(id) {//省市改变时触发，lect的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.nd(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.nd(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.nd(null);
}
function displayprovince() {//将获取的数据动态增加至lect
if (request.readystate == 4) {
if (request.status == 200) {
var a=new array;
var b=request.respontext;//将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加到lect中，第一个参数为text,第二个参数为value值.
}
}
}
function displaycity() {//将获取的数据动态增加至lect
if (request.readystate == 4) {
if (request.status == 200) {
var a=new array;
var b=request.respontext;
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() {//将获取的数据增加至lect
if (request.readystate == 4) {
if (request.status == 200) {
var a=new array;
var b=request.respontext;
a=b.split(“,”);
document.getelementbyid(“xian”).length=1;
if(document.getelementbyid(“sheng”).value!=”province”&&document.getelementbyid(“shi”).value!=”c有的人朗诵ity”){
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; chart=gb2312”);
$conn = new com(“adodb.connection”) or die(“cannot start ado”);
$connstr = “provider=sqloledb;persist curity info=fal;ur id=root;password=123456;initial catalog=area;data source=localhost”;
if($_request[‘id’]==0){//获得省列表
$conn->open($connstr); //建立数据库连接
$sqlstr = “lect 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->clo();
$rs = null;
$conn = null;
}
if($_request[‘id’]>0&&$_request[‘id’]<35){//获得省对应的市列表
$conn->open($connstr); //建立数据库连接
$sqlstr = “lect 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->clo();
$rs = null;
$conn = null;
}
if($_request[‘id’]>100){//获得省市对应的县列表
$conn->open($connstr); //建立数据库连接
$sqlstr = “noisy的副词lect 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->clo();
$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调试。
本文发布于:2023-04-06 22:40:06，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/0d7fc59b04b84064bad0bd9e0ed10564.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：PHP+Mysql+Ajax+JS实现省市区三级联动.doc
本文 PDF 下载地址：PHP+Mysql+Ajax+JS实现省市区三级联动.pdf
| 留言与评论（共有 0 条评论） |
