中国省市区三级联动实例（AJAX实现）

最新推荐文章于 2025-07-03 16:16:28 发布

Malons

最新推荐文章于 2025-07-03 16:16:28 发布

阅读量1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签：省市区三级联动 AJAX

本文链接：https://blog.youkuaiyun.com/u014313879/article/details/40951745

本文利用ajax实现一个省市区三级联动示例：

1.测试页面（test.htm)

<!DOCTYPE html>
<html>
<head>
<title>中国省市区三级联动</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="ajax_cities.js"></script>
</head>
<body>

	<select id="province" onchange="GetAreas(this,'city')">
		<option value="">----省----</option>
	</select>
	<script type="text/javascript">
		GetAreas(Element('province'),'province');
	</script>	
	<select id="city" onchange="GetAreas(this,'district')">
		<option value="">----市----</option>
	</select>
	<select id="district">
		<option value="浙江">----区（县）----</option>
	</select>

</body>
</html>

2.ajax_cities.js文件(ajax实现从服务器端获取信息并显示)

/**
 * Function: Fetch areas with ajax.
 * Author: Yannis Zhao
 * Date: 2014-11-04
 */

function GetXmlHttpObject() {	//Get XmlHttpRequest Object
	var xmlHttp = null;
	try {
		// Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	} catch (e) {
		// Internet Explorer
		try {
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}

function Element(id) {	//Get Element By ID
	return document.getElementById(id);
}

var xmlHttpObj = null;	//Global Object

// Fetch areas
function GetAreas(target, level) {

	var areaName = target.value;
	if (areaName == '' && level != 'province') {
		resetNextLevel(level);	//Reset next select
		return;
	}

	xmlHttpObj = GetXmlHttpObject();
	if (xmlHttpObj) {

		var url = "district.php";	//Target Php file
		
		/* Bind callback function to handle results */
		if (level == 'province') {
			xmlHttpObj.onreadystatechange = DisplayProvince;
		}
		
		if (level == 'city') {
			xmlHttpObj.onreadystatechange = DisplayCity;
		}
 
		if (level == 'district') {
			xmlHttpObj.onreadystatechange = DisplayDistrict;
		}

		var data = "level=" + level + "&areaName=" + areaName;//Data
		// alert(data);
		xmlHttpObj.open("POST", url, true);
		xmlHttpObj.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded;charset=utf-8");

		xmlHttpObj.send(data);
	}
}

function resetNextLevel(level) {
	Element(level).length = 0;
	var option = document.createElement('option');
	option.value = "";

	if (level == 'city') {
		option.innerText = "----市----";
		resetNextLevel('district');
	}

	if (level == 'district') {
		option.innerText = "----区（县）----";
	}
	Element(level).appendChild(option);
}

function DisplayProvince() {
	if (xmlHttpObj.readyState == 4 && xmlHttpObj.status == 200) {
		var provinces = eval("(" + xmlHttpObj.responseText + ")");

		// Init select
		Element('province').length = 0;
		var option = document.createElement('option');
		option.value = "";
		option.innerText = "----省----";
		Element('province').appendChild(option);

		// Append cities
		for (var i = 0; i < provinces.length; i++) {
			var value = provinces[i];
			option = document.createElement('option');
			option.value = value;
			option.innerText = value;
			Element('province').appendChild(option);
		}
	}
}

function DisplayCity() {
	
	resetNextLevel('district');
	
	if (xmlHttpObj.readyState == 4 && xmlHttpObj.status == 200) {
		var cities = eval("(" + xmlHttpObj.responseText + ")");
	
		// Init select
		Element('city').length = 0;
		var option = document.createElement('option');
		option.value = "";
		option.innerText = "----市----";
		Element('city').appendChild(option);

		// Append cities
		for (var i = 0; i < cities.length; i++) {
			var value = cities[i];
			option = document.createElement('option');
			option.value = value;
			option.innerText = value;
			Element('city').appendChild(option);
		}
	}
}

function DisplayDistrict() {
	if (xmlHttpObj.readyState == 4 && xmlHttpObj.status == 200) {
		var counties = eval("(" + xmlHttpObj.responseText + ")");
		
		// Init select
		Element('district').length = 0;
		var option = document.createElement('option');
		option.value = "";
		option.innerText = "----区（县）----";
		Element('district').appendChild(option);

		// Append cities
		for (var i = 0; i < counties.length; i++) {
			var value = counties[i];
			option = document.createElement('option');
			option.value = value;
			option.innerText = value;
			Element('district').appendChild(option);
		}
	}
}

3.服务器端 district.php

<?php
	include 'db_helper.php';
	header ( "Content-Type: text/html;charset=utf-8" );
	
	$dbHelper = new DBHelper();
	
	$level=$_POST['level'];//要获取的区域级别
	$areaName=$_POST['areaName'];//上一级区域名称
	
	/* 获取相应区域名称，以数组形式返回  */
	if($level == 'province') {
		$result = "[";
		$rs = $dbHelper->getProvinces();
		if ($rs && mysql_affected_rows()>0){
			while ( $row = mysql_fetch_assoc( $rs ) ) {
				$result.="'".$row['ProvinceName']."',";
			}
		}
		$result=substr($result, 0, strlen($result)-1)."]";
		echo $result;
	}
	
	if($level == 'city') {
		$result = "[";
		$rs = $dbHelper->getCities($areaName);
		if ($rs && mysql_affected_rows()>0){
			while ( $row = mysql_fetch_assoc( $rs ) ) {
				$result.="'".$row['CityName']."',";
			}
		}else{echo mysql_error();}
		$result=substr($result, 0, strlen($result)-1)."]";
		
		echo $result;
	}

	if($level == 'district') {
		$result = "[";
		$rs = $dbHelper->getDistricts($areaName);
		if ($rs && mysql_affected_rows()>0){
			while ( $row = mysql_fetch_assoc( $rs ) ) {
				$result.="'".$row['DistrictName']."',";
			}
		}else{echo mysql_error();}
		$result=substr($result, 0, strlen($result)-1)."]";
		
		echo $result;
	}
	
?>

4.数据访问类 db_helper.php

<?php
class DBHelper {
	private $host = "localhost";
	private $user = "urusername";
	private $pwd = "urpassword";
	private $dbHandler;
	function __construct() {
		$this->dbHandler = mysql_connect ( $this->host, $this->user, $this->pwd ) or die ( 'Could not connect: ' . mysql_errno () );
		mysql_select_db ( "city" ) or die ( '连接数据库出错' );
	}
	
	// Get provinces
	function getProvinces() {
		mysql_query ( "set names UTF-8", $this->dbHandler );
		$sql = "select ProvinceName from province";
		return mysql_query ( $sql, $this->dbHandler );
	}
	
	// Get cities
	function getCities($province) {
		mysql_query ( "set names UTF-8", $this->dbHandler );
		$sql = "select CityName from city where ProvinceID=(select ProvinceID from province where ProvinceName='" . $province . "')";
		return mysql_query ( $sql, $this->dbHandler );
	}
	
	// Get districts
	function getDistricts($city) {
		mysql_query ( "set names UTF-8", $this->dbHandler );
		$sql = "select DistrictName from district where CityID=(select CityID from city where CityName='" . $city . "')";
		return mysql_query ( $sql, $this->dbHandler );
	}
	function __destruct() {
		// Free database connection
		mysql_close ( $this->dbHandler );
	}
}
?>

5.所需数据

CREATE DATABASE IF NOT EXISTS `city`;
USE `city`;

DROP TABLE IF EXISTS `province`;

CREATE TABLE `province` (
  `ProvinceID` bigint(20) NOT NULL,
  `ProvinceName` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`ProvinceID`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

#Insert province
LOCK TABLES `province` WRITE;

INSERT INTO `province` VALUES (1,'北京市'),(2,'天津市'),(3,'河北省'),(4,'山西省'),(5,'内蒙古自治区'),(6,'辽宁省'),(7,'吉林省'),(8,'黑龙江省'),(9,'上海市'),(10,'江苏省'),(11,'浙江省'),(12,'安徽省'),(13,'福建省'),(14,'江西省'),(15,'山东省'),(16,'河南省'),(17,'湖北省'),(18,'湖南省'),(19,'广东省'),(20,'广西壮族自治区'),(21,'海南省'),(22,'重庆市'),(23,'四川省'),(24,'贵州省'),(25,'云南省'),(26,'西藏自治区'),(27,'陕西省'),(28,'甘肃省'),(29,'青海省'),(30,'宁夏回族自治区'),(31,'新疆维吾尔自治区'),(32,'香港特别行政区'),(33,'澳门特别行政区'),(34,'台湾省');

UNLOCK TABLES;

DROP TABLE IF EXISTS `city`;

CREATE TABLE `city` (
  `CityID` bigint(20) NOT NULL,
  `CityName` varchar(50) DEFAULT NULL,
  `ProvinceID` bigint(20) DEFAULT NULL,
  PRIMARY KEY (`CityID`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

#Insert city
LOCK TABLES `city` WRITE;

INSERT INTO `city` VALUES (1,'北京市',1),(2,'天津市',2),(3,'石家庄市',3),(4,'唐山市',3),(5,'秦皇岛市',3),(6,'邯郸市',3),(7,'邢台市',3),(8,'保定市',3),(9,'张家口市',3),(10,'承德市',3),(11,'沧州市',3),(12,'廊坊市',3),(13,'衡水市',3),(14,'太原市',4),(15,'大同市',4),(16,'阳泉市',4),(17,'长治市',4),(18,'晋城市',4),(19,'朔州市',4),(20,'晋中市',4),(21,'运城市',4),(22,'忻州市',4),(23,'临汾市',4),(24,'吕梁市',4),(25,'呼和浩特市',5),(26,'包头市',5),(27,'乌海市',5),(28,'赤峰市',5),(29,'通辽市',5),(30,'鄂尔多斯市',5),(31,'呼伦贝尔市',5),(32,'巴彦淖尔市',5),(33,'乌兰察布市',5),(34,'兴安盟',5),(35,'锡林郭勒盟',5),(36,'阿拉善盟',5),(37,'沈阳市',6),(38,'大连市',6),(39,'鞍山市',6),(40,'抚顺市',6),(41,'本溪市',6),(42,'丹东市',6),(43,'锦州市',6),(44,'营口市',6),(45,'阜新市',6),(46,'辽阳市',6),(47,'盘锦市',6),(48,'铁岭市',6),(49,'朝阳市',6),(50,'葫芦岛市',6),(51,'长春市',7),(52,'吉林市',7),(53,'四平市',7),(54,'辽源市',7),(55,'通化市',7),(56,'白山市',7),(57,'松原市',7),(58,'白城市',7),(59,'延边朝鲜族自治州',7),(60,'哈尔滨市',8),(61,'齐齐哈尔市',8),(62,'鸡西市',8),(63,'鹤岗市',8),(64,'双鸭山市',8),(65,'大庆市',8),(66,'伊春市',8),(67,'佳木斯市',8),(68,'七台河市',8),(69,'牡丹江市',8),(70,'黑河市',8),(71,'绥化市',8),(72,'大兴安岭地区',8),(73,'上海市',9),(74,'南京市',10),(75,'无锡市',10),(76,'徐州市',10),(77,'常州市',10),(78,'苏州市',10),(79,'南通市',10),(80,'连云港市',10),(81,'淮安市',10),(82,'盐城市',10),(83,'扬州市',10),(84,'镇江市',10),(85,'泰州市',10),(86,'宿迁市',10),(87,'杭州市',11),(88,'宁波市',11),(89,'温州市',11),(90,'嘉兴市',11),(91,'湖州市',11),(92,'绍兴市',11),(93,'金华市',11),(94,'衢州市',11),(95,'舟山市',11),(96,'台州市',11),(97,'丽水市',11),(98,'合肥市',12),(99,'芜湖市',12),(100,'蚌埠市',12),(101,'淮南市',12),(102,'马鞍山市',12),(103,'淮北市',12),(104,'铜陵市',12),(105,'安庆市',12),(106,'黄山市',12),(107,'滁州市',12),(108,'阜阳市',12),(109,'宿州市',12),(110,'巢湖市',12),(111,'六安市',12),(112,'亳州市',12),(113,'池州市',12),(114,'宣城市',12),(115,'福州市',13),(116,'厦门市',13),(117,'莆田市',13),(118,'三明市',13),(119,'泉州市',13),(120,'漳州市',13),(121,'南平市',13),(122,'龙岩市',13),(123,'宁德市',13),(124,'南昌市',14),(125,'景德镇市',14),(126,'萍乡市',14),(127,'九江市',14),(128,'新余市',14),(129,'鹰潭市',14),(130,'赣州市',14),(131,'吉安市',14),(132,'宜春市',14),(133,'抚州市',14),(134,'上饶市',14),(135,'济南市',15),(136,'青岛市',15),(137,'淄博市',15),(138,'枣庄市',15),(139,'东营市',15),(140,'烟台市',15),(141,'潍坊市',15),(142,'济宁市',15),(143,'泰安市',15),(144,'威海市',15),(145,'日照市',15),(146,'莱芜市',15),(147,'临沂市',15),(148,'德州市',15),(149,'聊城市',15),(150,'滨州市',15),(151,'荷泽市',15),(152,'郑州市',16),(153,'开封市',16),(154,'洛阳市',16),(155,'平顶山市',16),(156,'安阳市',16),(157,'鹤壁市',16),(158,'新乡市',16),(159,'焦作市',16),(160,'濮阳市',16),(161,'许昌市',16),(162,'漯河市',16),(163,'三门峡市',16),(164,'南阳市',16),(165,'商丘市',16),(166,'信阳市',16),(167,'周口市',16),(168,'驻马店市',16),(169,'武汉市',17),(170,'黄石市',17),(171,'十堰市',17),(172,'宜昌市',17),(173,'襄樊市',17),(174,'鄂州市',17),(175,'荆门市',17),(176,'孝感市',17),(177,'荆州市',17),(178,'黄冈市',17),(179,'咸宁市',17),(180,'随州市',17),(181,'恩施土家族苗族自治州',17),(182,'神农架',17),(183,'长沙市',18),(184,'株洲市',18),(185,'湘潭市',18),(186,'衡阳市',18),(187,'邵阳市',18),(188,'岳阳市',18),(189,'常德市',18),(190,'张家界市',18),(191,'益阳市',18),(192,'郴州市',18),(193,'永州市',18),(194,'怀化市',18),(195,'娄底市',18),(196,'湘西土家族苗族自治州',18),(197,'广州市',19),(198,'韶关市',19),(199,'深圳市',19),(200,'珠海市',19),(201,'汕头市',19),(202,'佛山市',19),(203,'江门市',19),(204,'湛江市',19),(205,'茂名市',19),(206,'肇庆市',19),(207,'惠州市',19),(208,'梅州市',19),(209,'汕尾市',19),(210,'河源市',19),(211,'阳江市',19),(212,'清远市',19),(213,'东莞市',19),(214,'中山市',19),(215,'潮州市',19),(216,'揭阳市',19),(217,'云浮市',19),(218,'南宁市',20),(219,'柳州市',20),(220,'桂林市',20),(221,'梧州市',20),(222,'北海市',20),(223,'防城港市',20),(224,'钦州市',20),(225,'贵港市',20),(226,'玉林市',20),(227,'百色市',20),(228,'贺州市',20),(229,'河池市',20),(230,'来宾市',20),(231,'崇左市',20),(232,'海口市',21),(233,'三亚市',21),(234,'重庆市',22),(235,'成都市',23),(236,'自贡市',23),(237,'攀枝花市',23),(238,'泸州市',23),(239,'德阳市',23),(240,'绵阳市',23),(241,'广元市',23),(242,'遂宁市',23),(243,'内江市',23),(244,'乐山市',23),(245,'南充市',23),(246,'眉山市',23),(247,'宜宾市',23),(248,'广安市',23),(249,'达州市',23),(250,'雅安市',23),(251,'巴中市',23),(252,'资阳市',23),(253,'阿坝藏族羌族自治州',23),(254,'甘孜藏族自治州',23),(255,'凉山彝族自治州',23),(256,'贵阳市',24),(257,'六盘水市',24),(258,'遵义市',24),(259,'安顺市',24),(260,'铜仁地区',24),(261,'黔西南布依族苗族自治州',24),(262,'毕节地区',24),(263,'黔东南苗族侗族自治州',24),(264,'黔南布依族苗族自治州',24),(265,'昆明市',25),(266,'曲靖市',25),(267,'玉溪市',25),(268,'保山市