省市区三级联动下拉菜单的实现（含最新行政区划数据）

最新推荐文章于 2024-03-26 17:36:24 发布

chuqiecheng9969

最新推荐文章于 2024-03-26 17:36:24 发布

阅读量2.4k

点赞数

文章标签：数据库 php json

原文链接：https://my.oschina.net/ximidao/blog/516863

版权

先看下效果图：

本项目省市区的数据来源于国家统计局官网2015年04月15日发布的，截止到2014年10月31日的最新数据，官网地址为：http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201504/t20150415_712722.html

源码下载地址：

https://git.oschina.net/ximidao/province-city-district

简单说下思路：

1、数据入库

先搭建好PHP运行环境，将官网上的数据拷到text文件，本地新建一个数据库，编码格式为utf-8，PHP处理入库（具体入库就不写了）

省市区对应三个表：

表 province

字段名	类型	长度
id	int	6
province	varchar	50

表 city

字段名	类型	长度
id	int	6
city	varchar	80
province_id	int	6

表 district

字段名	类型	长度
id	int	6
district	varchar	80
city_id	int	50

2、生成JSON

PHP读取数据库，生成一个包省市区所有数据的JSON

<?php

header("Content-type: text/html; charset=utf-8"); 

$db_host = 'localhost'; //主机地址
$db_user = 'root';		//数据库用户名
$db_pwd = '123456';		//数据库密码
$db_name = 'heiyu';		//数据库名称
$mysqli = new mysqli($db_host,$db_user,$db_pwd,$db_name);

mysqli_query($mysqli,"SET NAMES utf8");

/*省数据查询*/
$query_province = "SELECT id,province FROM province";
$result_province=$mysqli->query($query_province);
while($row_province =$result_province->fetch_array() ){   
  $array_province[] = array(id=>(int)$row_province[id],name=>$row_province[province]);
}  

/*市数据查询*/
$query_city = "SELECT id,city,province_id FROM city";
$result_city=$mysqli->query($query_city);
while($row_city =$result_city->fetch_array() ){   
  $array_city[$row_city[province_id]][] = array(id=>(int)$row_city[id],name=>$row_city[city]);
}  

/*区数据查询*/
$query_district = "SELECT id,district,city_id FROM district";
$result_district = $mysqli->query($query_district);
while($row_district =$result_district->fetch_array() ){   
  $array_district[$row_district[city_id]][] = array(id=>(int)$row_district[id],name=>$row_district[district]);
}  

$result_province->free();
$result_city->free();
$result_district->free();
$mysqli->close();

$array = array(province=>$array_province,city=>$array_city,district=>$array_district);
$json = json_encode($array);

//echo $json;

//为了方便查看，将unicode编码转成汉字
echo preg_replace("#\\\u([0-9a-f]+)#ie","iconv('UCS-2','UTF-8', pack('H4', '\\1'))",$json);


?>

因为省市区的变动性不高，可以把PHP生成的JSON拷贝到一个文件里面，Ajax请求的时候直接访问该文件就可以了，减轻数据库负担

3、实现选择操作

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>省市区三级联动下拉菜单</title>
<meta name="author" content="西米岛主">
<meta name="description" content="博客地址：http://my.oschina.net/ximidao">
<style type="text/css">
	.select-box{margin: 30px; padding: 30px; background-color: #70C104;}
	select{height: 30px;}
</style>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		/*初始化，加载省市区*/
		$.ajax({
			type: 'GET',
			url: 'data.json',
			dataType: 'json',
			success: function(data){
            	var htmlProvince = '';
            	province = data.province;
            	city = data.city;
            	district = data.district;
            	for(var i=0; i<province.length;i++){
				  	htmlProvince += '<option value="'+province[i].id+'">'+province[i].name+'</option>';
				}
				$('#province').append(htmlProvince);
            },
            error: function(){
            	console.log('请求失败');
            }
        });
		/*选择省*/
        $('#province').change(function(){
        	var code = $(this).val();
        	if(code!=''){
        		var cityCode  = city[code][0].id;
        		var htmlCity = '',
        			htmlDistrict = '';
        		for(var i=0; i<city[code].length;i++){
				  	htmlCity += '<option value="'+city[code][i].id+'">'+city[code][i].name+'</option>';
				}
        		$('#city').html(htmlCity);
        		
        		for(var i=0; i<district[cityCode].length;i++){
				  	htmlDistrict += '<option value="'+district[cityCode][i].id+'">'+district[cityCode][i].name+'</option>';
				}
        		$('#district').html(htmlDistrict);
        	}else{
        		$('#city,#district').html('');
        	}
        });

		/*选择市*/
		$('#city').change(function(){
			var cityCode = $(this).val();
        	var htmlDistrict = '';
    		for(var i=0; i<district[cityCode].length;i++){
			  	htmlDistrict += '<option value="'+district[cityCode][i].id+'">'+district[cityCode][i].name+'</option>';
			}
    		$('#district').html(htmlDistrict);
		});
	});
</script>
</head>
<body>
	<div class="select-box">
		<select id="province"><option value="">请选择省份</option></select> 
		<select id="city"></select> 
		<select id="district"></select> 
	</div>
</body>
</html>

详细请看项目源码。

转载于:https://my.oschina.net/ximidao/blog/516863

chuqiecheng9969

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
省市区三级联动下拉菜单的实现（含最新行政区划数据）

先看下效果图：本项目省市区的数据来源于国家统计局官网2015年04月15日发布的，截止到2014年10月31日的最新数据，官网地址为：http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201504/t20150415_712722.html 源码下...
复制链接

扫一扫