您的位置：首页 > Web前端 > JQuery

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

2015-10-14 00:00 936 查看
摘要: 省市区三级联动下拉菜单的实现，项目地址：https://git.oschina.net/ximidao/province-city-district

先看下效果图：



本项目省市区的数据来源于国家统计局官网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

字段名类型
长度
idint6
provincevarchar50
表 city

字段名类型
长度
idint6
cityvarchar80
province_idint6
表 district

字段名类型
长度
idint6
districtvarchar80
city_idint50
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>

详细请看项目源码。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  省市区 三级联动 PHP jquery
相关文章推荐
新的分享
章节导航