扩展应用：全国最新行政区划行政三级联动应用及数据源下载【2020年05月更新】

查看原文/演示及更多教程：https://www.ebaitian.cn/doc/start/html/2020050811593030.html

一、三级联动数据源

本扩展应用主要提供目前中国全部行政区域的省（市/自治区）、市（区/自治州）、区（县/市）三级联动最新数据，可以用于各类应用开发。2019年10月31日，我公司决定将中国最新的行政区划数据向社会公众共享，以便于大家及时使用更新，更方便的使用我们的数据。

二、三级联动文件下载

下载三级联动地区 PHP/JS 数组文件：https://download.csdn.net/download/hxbgzgs85/12399830

说明：请将下载的文件后缀“.gz”去掉重命名直接使用。

三、三级联动示例

1、项目目标页中引入三级联动的数据文件及其插件：

<!--引入数据文件及其插件-->
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./js/woyaocha.net.china.area.js"></script>
<script type="text/javascript" src="./js/woyaocha.net.provincesCityDis.js"></script>

或者直接引入云端的资源（适用于 http 及 https 协议）：

<!--引入数据文件及其插件-->
<script type="text/javascript" src="//cdn-static.ebaitian.cn/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn-static.ebaitian.cn/ebtinc/china-area/ebtinc.provincesCityDis.js"></script>
<script type="text/javascript" src="//cdn-static.ebaitian.cn/ebtinc/china-area/ebtinc.china.area.js"></script>

2、三级联动调用代码：

<span id="chinaAreaList"></span>

说明：示例仅展示 js 数据的使用，php 的数据请根据项目的实际需求引入数组数据即可；另外，三级联动的扩展应用需要与 JQuery 一起引入使用，也就是说，使用三级联动必须先引入 JQuery 插件，建议使用最闹心的 JQuery 插件。

3、三级联动效果如下：

4、获取三级联动选择值：

以下代码通过 JQuery 方式获取：

//获取省（市/自治区）
$('#province').val();
//获取市（区/自治州）
$('#city').val();
//获取区（县/市）
$('#dis').val();

或者：

//获取省（市/自治区）
$("select[name='region[province]']").val();
//获取市（区/自治州）
$("select[name='region[city]']").val();
//获取区（县/市）
$("select[name='region[dis]']").val();

说明：推荐使用第一种方式获取；另外如果直接提交表单，也可以使用 select 的 name 属性直接获取，以 php 的 post 方式提交数据为例，代码如下：

//获取省（市/自治区）
$province=$_POST['province'];
//获取市（区/自治州）
$province=$_POST['city'];
//获取区（县/市）
$province=$_POST['dis'];

5、参考 css 样式：

* {font-size:14px;line-height:1.6;font-family:msyh,Microsoft Yahei;}
#province {width:160px;float:left;}
#city {width:210px;float:left;margin-left:5px;}
#dis {width:200px;float:left;margin-left:5px;}