PHP+Mysql+Ajax+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是服务器端的，建议发布网站后通过ip调试。
相关推荐
-
jquery+json 通用三级联动下拉列表
Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现 第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第二个是采用Json数据格式构建,是我的第二次尝试改进
-
js操作二级联动实现代码
表结构 二级或多级联动主要是以数据库中具有父编号的表为基础,这个也不例外 id,parent_id,name 三列. 采用js操作 先说下数据在js中的存储方式. 主要用二维数组来存储数据.结构如下: a[父编号]=[[子编号1,子名称1],[子编号2,子名称2],[子编号3,子名称3],--]; 首先用父编号获取所有的子数据,在把子数据的编号及名称绑定在dropdown中 第一步 二级联动数据(后面说这些数据怎么得到) 复制代码 代码如下: var cities=new Array(); ci
-
js实现的全国省市二级联动下拉选择菜单完整实例
本文实例讲述了js实现的全国省市二级联动下拉选择菜单.分享给大家供大家参考.具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-province-city-cho-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
-
基于jquery的无限级联下拉框js插件
灵活性方面考虑了比较多的方面,提供了几个重要的配置方便在各类环境下使用,欢迎各位童鞋使用,源码完全开放.开发这个插件的缘于前段时间维护一个4级级联下拉框被里面200行代码及复杂的结构和bug所郁闷(之所以这么多代码是因为该级联下拉框有时只出现2个或3个),想到这类的需求其实经常都能遇到,jquery里没有这样比较好的插件,索性自己开发个.源代码并不复杂,稍微复杂的地方在第二个插件使用了缓存,造成理解起来十分困难,后面会做些解释. 插件一:适合在不与服务器进行AJAX交互情况使用,需预先将所有下拉
-
最好用的省市二级联动 原生js实现你值得拥有
复制代码 代码如下: <script language=javascript> cities = new Object(); cities['台湾']=new Array('台北','台南','其他'); cities['马来西亚']=new Array('Malaysia'); cities['北京']=new Array('北京'); cities['上海']=new Array('上海'); cities['天津']=new Array('天津'); cities['重庆']=new A
-
javascript实现省市区三级联动下拉框菜单
本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/
-
JS实多级联动下拉菜单类，简单实现省市区联动菜单！
作者:ybcola 这段js代码是很久以前的作品了,应该在一年以前吧!当时是在做一个农村人才管理系统的时候遇到的问题,因为系统要求参选择并通过后台添加省市区县甚至到乡镇村队,而在对人才的信息进行修改时要求用下拉列表进行选择,并且每个人才来源可能是省市,或者省市区县,或者一直取队都要选择!那时第一反映就是找网上是否有现成的代码,找到一个最常用的就是省市二级联动,那时那段js代码在网上随处可见,可是拿过来对我来说没用,因为我需要的是一个多级联通并且可以自由扩展的代码!最终还是自己动手写了JS代码.
-
JS制作简单的三级联动
用javascript制作的一个简单三级联动,非常简单实用 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 省: <select style="wi
-
JavaScript实现三级级联特效
本文实例为大家分享了js实现三级级联特效的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 实现效果:选择省会出现相应的县下拉框,同时市的下拉框改变--> <script type="applicati
-
省市区三级联动下拉框菜单javascript版
实现省市区三级下拉列表框,并且要实现联动效果. 方法一: 1.视图代码 <select class="prov" id="prov5" name="Province" data-code="@Model.Province"> </select> <select class="city" id="city5" name="City" dat