先看下效果图：
本项目省市区的数据来源于国家统计局官网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
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、实现选择操作
省市区三级联动下拉菜单
.select-box{margin: 30px; padding: 30px; background-color: #70C104;}
select{height: 30px;}
$(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[i].name+'';
}
$('#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][i].name+'';
}
$('#city').html(htmlCity);
for(var i=0; i'+district[cityCode][i].name+'';
}
$('#district').html(htmlDistrict);
}else{
$('#city,#district').html('');
}
});
/*选择市*/
$('#city').change(function(){
var cityCode = $(this).val();
var htmlDistrict = '';
for(var i=0; i'+district[cityCode][i].name+'';
}
$('#district').html(htmlDistrict);
});
});
请选择省份