[PHP]Ajax_Mysql实现省市县下拉选择框三级联动_附省市县数据库_附源码

日期：2023-2-13 栏目： 暂未分类 浏览：2111次 评论：3条 侧边栏



微夏博客为实现此功能，在网上找了相应源码，但是结果要么是时间太久，要么是源码不完整导致无法实现效果。

为了此效果，微夏博客整理了相应源码，在此分享给大家，以免需要的朋友走弯路。


为了学习效果，微夏博客把此源码分为多个文件，以便更好理解源码。


有以下文件：

index.php

showCity.php

showCounty.php

ajax.js

pcc.sql


其中所需要的省市县的行政编码，可参考此链接。

https://www.mca.gov.cn/article/sj/xzqh/2020/202006/202008310601.shtml



以下是相应源码。


pcc.sql(ProvinceCityCounty)内仅为演示数据 


DROP TABLE IF EXISTS `province`;
CREATE TABLE `province` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL DEFAULT '' COMMENT '省份名称',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3509 DEFAULT CHARSET=utf8;
INSERT INTO `province` VALUES ('410000', '河南');
INSERT INTO `province` VALUES ('130000', '河北');


DROP TABLE IF EXISTS `city`;
CREATE TABLE `city` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL DEFAULT '' COMMENT '城市名称',
  `cid` int(11) NOT NULL DEFAULT '0' COMMENT '省份id',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3509 DEFAULT CHARSET=utf8;
INSERT INTO `City` VALUES ('410100', '郑州市','410000');
INSERT INTO `City` VALUES ('410200', '开封市','410000');
INSERT INTO `City` VALUES ('410300', '洛阳市','410000');
INSERT INTO `City` VALUES ('411400', '商丘市','410000');
INSERT INTO `City` VALUES ('130100', '石家庄','130000');
INSERT INTO `City` VALUES ('130200', '唐山','130000');
INSERT INTO `City` VALUES ('130300', '秦皇岛','130000');
INSERT INTO `City` VALUES ('130600', '保定','130000');



DROP TABLE IF EXISTS `county`;
CREATE TABLE `county` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL DEFAULT '' COMMENT '县区名称',
  `pid` int(11) NOT NULL DEFAULT '0' COMMENT '城市id',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3509 DEFAULT CHARSET=utf8;
INSERT INTO `county` VALUES ('410102', '中原区','410100');
INSERT INTO `county` VALUES ('410103', '二七区','410100');
INSERT INTO `county` VALUES ('410104', '管城回族区','410100');
INSERT INTO `county` VALUES ('410105', '金水区','410100');
INSERT INTO `county` VALUES ('410106', '上街区','410100');
INSERT INTO `county` VALUES ('410108', '惠济区','410100');
INSERT INTO `county` VALUES ('410122', '中牟县','410100');
INSERT INTO `county` VALUES ('410181', '巩义市','410100');
INSERT INTO `county` VALUES ('410182', '荥阳市','410100');
INSERT INTO `county` VALUES ('410183', '新密市','410100');
INSERT INTO `county` VALUES ('410184', '新郑市','410100');
INSERT INTO `county` VALUES ('410185', '登封市','410100');
INSERT INTO `county` VALUES ('410202', '龙亭区','410200');
INSERT INTO `county` VALUES ('410203', '顺河回族区','410200');
INSERT INTO `county` VALUES ('410204', '鼓楼区','410200');
INSERT INTO `county` VALUES ('410205', '禹王台区','410200');
INSERT INTO `county` VALUES ('410212', '祥符区','410200');
INSERT INTO `county` VALUES ('410221', '杞县','410200');
INSERT INTO `county` VALUES ('410222', '通许县','410200');
INSERT INTO `county` VALUES ('410223', '尉氏县','410200');
INSERT INTO `county` VALUES ('410225', '兰考县','410200');
INSERT INTO `county` VALUES ('410302', '老城区','410300');
INSERT INTO `county` VALUES ('410303', '西工区','410300');
INSERT INTO `county` VALUES ('410304', '瀍河回族区','410300');
INSERT INTO `county` VALUES ('410305', '涧西区','410300');
INSERT INTO `county` VALUES ('410306', '吉利区','410300');
INSERT INTO `county` VALUES ('410311', '洛龙区','410300');
INSERT INTO `county` VALUES ('410322', '孟津县','410300');
INSERT INTO `county` VALUES ('410323', '新安县','410300');
INSERT INTO `county` VALUES ('410324', '栾川县','410300');
INSERT INTO `county` VALUES ('410325', '嵩县','410300');
INSERT INTO `county` VALUES ('410326', '汝阳县','410300');
INSERT INTO `county` VALUES ('410327', '宜阳县','410300');
INSERT INTO `county` VALUES ('410328', '洛宁县','410300');
INSERT INTO `county` VALUES ('410329', '伊川县','410300');
INSERT INTO `county` VALUES ('410381', '偃师市','410300');
INSERT INTO `county` VALUES ('411402', '梁园区','411400');
INSERT INTO `county` VALUES ('411403', '睢阳区','411400');
INSERT INTO `county` VALUES ('411421', '民权县','411400');
INSERT INTO `county` VALUES ('411422', '睢县','411400');
INSERT INTO `county` VALUES ('411423', '宁陵县','411400');
INSERT INTO `county` VALUES ('411424', '柘城县','411400');
INSERT INTO `county` VALUES ('411425', '虞城县','411400');
INSERT INTO `county` VALUES ('411426', '夏邑县','411400');
INSERT INTO `county` VALUES ('411481', '永城市','411400');
INSERT INTO `county` VALUES ('130102', '长安区','130100');
INSERT INTO `county` VALUES ('130104', '桥西区','130100');
INSERT INTO `county` VALUES ('130105', '新华区','130100');
INSERT INTO `county` VALUES ('130107', '井陉矿区','130100');
INSERT INTO `county` VALUES ('130108', '裕华区','130100');
INSERT INTO `county` VALUES ('130109', '藁城区','130100');
INSERT INTO `county` VALUES ('130110', '鹿泉区','130100');
INSERT INTO `county` VALUES ('130111', '栾城区','130100');
INSERT INTO `county` VALUES ('130121', '井陉县','130100');
INSERT INTO `county` VALUES ('130123', '正定县','130100');
INSERT INTO `county` VALUES ('130125', '行唐县','130100');
INSERT INTO `county` VALUES ('130126', '灵寿县','130100');
INSERT INTO `county` VALUES ('130127', '高邑县','130100');
INSERT INTO `county` VALUES ('130128', '深泽县','130100');
INSERT INTO `county` VALUES ('130129', '赞皇县','130100');
INSERT INTO `county` VALUES ('130130', '无极县','130100');
INSERT INTO `county` VALUES ('130131', '平山县','130100');
INSERT INTO `county` VALUES ('130132', '元氏县','130100');
INSERT INTO `county` VALUES ('130133', '赵县','130100');
INSERT INTO `county` VALUES ('130181', '辛集市','130100');
INSERT INTO `county` VALUES ('130183', '晋州市','130100');
INSERT INTO `county` VALUES ('130184', '新乐市','130100');
INSERT INTO `county` VALUES ('130202', '路南区','130200');
INSERT INTO `county` VALUES ('130203', '路北区','130200');
INSERT INTO `county` VALUES ('130204', '古冶区','130200');
INSERT INTO `county` VALUES ('130205', '开平区','130200');
INSERT INTO `county` VALUES ('130207', '丰南区','130200');
INSERT INTO `county` VALUES ('130208', '丰润区','130200');
INSERT INTO `county` VALUES ('130209', '曹妃甸区','130200');
INSERT INTO `county` VALUES ('130224', '滦南县','130200');
INSERT INTO `county` VALUES ('130225', '乐亭县','130200');
INSERT INTO `county` VALUES ('130227', '迁西县','130200');
INSERT INTO `county` VALUES ('130229', '玉田县','130200');
INSERT INTO `county` VALUES ('130281', '遵化市','130200');
INSERT INTO `county` VALUES ('130283', '迁安市','130200');
INSERT INTO `county` VALUES ('130284', '滦州市','130200');
INSERT INTO `county` VALUES ('130302', '海港区','130300');
INSERT INTO `county` VALUES ('130303', '山海关区','130300');
INSERT INTO `county` VALUES ('130304', '北戴河区','130300');
INSERT INTO `county` VALUES ('130306', '抚宁区','130300');
INSERT INTO `county` VALUES ('130321', '青龙满族自治县','130300');
INSERT INTO `county` VALUES ('130322', '昌黎县','130300');
INSERT INTO `county` VALUES ('130324', '卢龙县','130300');
INSERT INTO `county` VALUES ('130602', '竞秀区','130600');
INSERT INTO `county` VALUES ('130606', '莲池区','130600');
INSERT INTO `county` VALUES ('130607', '满城区','130600');
INSERT INTO `county` VALUES ('130608', '清苑区','130600');
INSERT INTO `county` VALUES ('130609', '徐水区','130600');
INSERT INTO `county` VALUES ('130623', '涞水县','130600');
INSERT INTO `county` VALUES ('130624', '阜平县','130600');
INSERT INTO `county` VALUES ('130626', '定兴县','130600');
INSERT INTO `county` VALUES ('130627', '唐县','130600');
INSERT INTO `county` VALUES ('130628', '高阳县','130600');
INSERT INTO `county` VALUES ('130629', '容城县','130600');
INSERT INTO `county` VALUES ('130630', '涞源县','130600');
INSERT INTO `county` VALUES ('130631', '望都县','130600');
INSERT INTO `county` VALUES ('130632', '安新县','130600');
INSERT INTO `county` VALUES ('130633', '易县','130600');
INSERT INTO `county` VALUES ('130634', '曲阳县','130600');
INSERT INTO `county` VALUES ('130635', '蠡县','130600');
INSERT INTO `county` VALUES ('130636', '顺平县','130600');
INSERT INTO `county` VALUES ('130637', '博野县','130600');
INSERT INTO `county` VALUES ('130638', '雄县','130600');
INSERT INTO `county` VALUES ('130681', '涿州市','130600');
INSERT INTO `county` VALUES ('130682', '定州市','130600');
INSERT INTO `county` VALUES ('130683', '安国市','130600');
INSERT INTO `county` VALUES ('130684', '高碑店市','130600');



index.php 


<html>
<head>
<meta charset="utf-8" />
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>


</head>
<body>
<select id="province" onchange="getCity()">
	<option value="0">---省---</option>
	<option value="410000">河南省</option>
	<option value="130000">河北省</option>
</select>
<select id="city" onchange="getCounty()">
	<option value="0">---城市---</option>
</select>
<select id="county">
	<option value="">---县城---</option>
</select>
</body>
</html>



showCity.php 


<?php


//告诉浏览器不要缓存数据
header("Cache-control:no-cache");

//连接数据
$conn=mysqli_connect("localhost","select","select","select");

//选择编码
mysqli_query($conn,"set names utf8");



//接收用户的选择的省的名字
$id=$_POST['id'];

//sql语句
$sql ="select * from city where cid=".$id;
$result=mysqli_query($conn,$sql);
//判断结果是否为0
if(mysqli_num_rows($result) ==0){
	echo "<option value='0'>---城市---</option>";
}else{
	while($row=mysqli_fetch_array($result)){
		echo "<option value=".$row["id"].">".$row["name"]."</option>";
	}

}

?>



showCounty.php 


<?php

//告诉浏览器不要缓存数据
header("Cache-control:no-cache");

//连接数据
$conn=mysqli_connect("localhost","select","select","select");

//选择编码
mysqli_query($conn,"set names utf8");

//接收用户的选择的省的名字
$pid=$_POST['pid'];



//sql语句
$sql ="select * from county where pid=".$pid;
$result=mysqli_query($conn,$sql);
//判断结果是否为0
if(mysqli_num_rows($result) ==0){
	echo "<option value='0'>---县城---</option>";
}else{
	while($row=mysqli_fetch_array($result)){
		echo "<option value=".$row["id"].">".$row["name"]."</option>";
	}

}




?>



Ajax文件源码： 



//创建ajax引擎
function getXmlHttpObject(){
	var xmlHttpRequest;
	// 不同的浏览器获取对象xmlHttprequest 对象方法不一样
	if(window.ActiveXObject){
		xmlHttpRequest = new ActiveXObject("Micosoft.XMLHTTP");
	}else{
		xmlHttpRequest = new XMLHttpRequest();
	}
	return xmlHttpRequest;
}
var myXmlHttpRequest ="";


function getCity(){
	myXmlHttpRequest=getXmlHttpObject();
	if(myXmlHttpRequest){
		
		var url="showCity.php" //post
		var data="id="+$("province").value;
		//打开请求
		myXmlHttpRequest.open("post",url,true);//异步方式
		myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 

		//指定回调函数
		myXmlHttpRequest.onreadystatechange=city;

		//发送
		myXmlHttpRequest.send(data);
	}
}

function city(){
	
	// 判断是否执行成功
	if(myXmlHttpRequest.readyState==4){
		if(myXmlHttpRequest.status==200){	
		// 取回成功后的数据
		var json=myXmlHttpRequest.responseText;
		
		// ID为city的元素下，添加获取到的数据
		$("city").innerHTML=json;
		
		}
	}
}


function getCounty(){
	myXmlHttpRequest=getXmlHttpObject();
	if(myXmlHttpRequest){
		
		var url="showCounty.php" //post
		var data="pid="+$("city").value;
		//打开请求
		myXmlHttpRequest.open("post",url,true);//异步方式
		myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 

		//指定回调函数
		myXmlHttpRequest.onreadystatechange=county;

		//发送
		myXmlHttpRequest.send(data);
	}
}

function county(){
	
	// 判断是否执行成功
	if(myXmlHttpRequest.readyState==4){
		if(myXmlHttpRequest.status==200){	
			
		// 取回成功后的数据
		var json=myXmlHttpRequest.responseText;
		window.alert(json);
		// ID为city的元素下，添加获取到的数据
		$("county").innerHTML=json;
		
		}
	}
}
// 通过ID号获取对象
function $(id){
		return document.getElementById(id);
}


整体数据库文件：

https://vxia.lanzouy.com/iZkmx0nryysh




赞赏
X
赞赏方式：
  • 支付宝
  • 微信

打开支付宝扫一扫
上一篇：
下一篇：

内容版权声明：除非注明，否则皆为本站原创文章。

转载注明出处：https://www.vxia.net/post-1637.html

相关推荐

评论

  1. 康师傅
    2023-04-05 17:21
    回复
    哈哈哈哈，服了，最关键的文件ajax文件不提供img:11img:11img:11img:11img:11img:11img:11img:11img:11
    1. 微夏博客
      2023-04-08 12:51
      回复
      @康师傅：抱歉，疏忽了~幸好源文件还保存着，已更新相应文件源码
  1. 威威
    2023-03-13 15:38
    回复
    欢迎归来  微夏加油img:6


你肿么看？

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。