js加php地区三级联动,PHP+Mysql+Ajax+JS实现省市区三级联动_PHP

向右看齐 2023-01-17 08:23 147阅读 0赞

Ajax

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

index.html代码：

代码如下:

BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

省市区三级联动

请选择省份

请选择市区

请选择县乡

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代码：

代码如下:

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

![1405T10261250-15461.jpg][]

完成后效果：

![1405T102629E0-291N.jpg][]

![1405T10264DP-3RS.jpg][]

![1405T102B5620-4R09.jpg][]

备注：PHP是服务器端的，建议发布网站后通过ip调试。 本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉 本文系统来源：php中文网

[1405T10261250-15461.jpg]: http://img.bitscn.com/upimg/allimg/c140720/1405T10261250-15461.jpg
[1405T102629E0-291N.jpg]: http://img.bitscn.com/upimg/allimg/c140720/1405T102629E0-291N.jpg
[1405T10264DP-3RS.jpg]: http://img.bitscn.com/upimg/allimg/c140720/1405T10264DP-3RS.jpg
[1405T102B5620-4R09.jpg]: http://img.bitscn.com/upimg/allimg/c140720/1405T102B5620-4R09.jpg