一、三級聯(lián)動數(shù)據(jù)源

本擴展應用主要提供目前中國全部行政區(qū)域的?。ㄊ?自治區(qū)）、市（區(qū)/自治州）、區(qū)（縣/市）三級聯(lián)動最新數(shù)據(jù)，可以用于各類應用開發(fā)。2019年10月31日，我公司決定將中國最新的行政區(qū)劃數(shù)據(jù)向社會公眾共享，以便于大家及時使用更新，更方便的使用我們的數(shù)據(jù)。

二、三級聯(lián)動文件下載

1）下載：三級聯(lián)動地區(qū) PHP 數(shù)組文件
　　2）下載：三級聯(lián)動地區(qū) JS 數(shù)據(jù)文件

說明：請將下載的文件后綴“.gz”去掉重命名直接使用。

三、三級聯(lián)動示例

1、項目目標頁中引入三級聯(lián)動的數(shù)據(jù)文件及其插件：

<!--引入數(shù)據(jù)文件及其插件-->
<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 協(xié)議）：

<!--引入數(shù)據(jù)文件及其插件-->
<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、三級聯(lián)動調(diào)用代碼：

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

說明：示例僅展示 js 數(shù)據(jù)的使用，php 的數(shù)據(jù)請根據(jù)項目的實際需求引入數(shù)組數(shù)據(jù)即可；另外，三級聯(lián)動的擴展應用需要與 JQuery 一起引入使用，也就是說，使用三級聯(lián)動必須先引入 JQuery 插件，建議使用最鬧心的 JQuery 插件。

3、三級聯(lián)動效果如下：

4、獲取三級聯(lián)動選擇值：

以下代碼通過 JQuery 方式獲取：

//獲取?。ㄊ?自治區(qū)）
$('#province').val();
//獲取市（區(qū)/自治州）
$('#city').val();
//獲取區(qū)（縣/市）
$('#dis').val();

或者：

//獲取?。ㄊ?自治區(qū)）
$("select[name='region[province]']").val();
//獲取市（區(qū)/自治州）
$("select[name='region[city]']").val();
//獲取區(qū)（縣/市）
$("select[name='region[dis]']").val();

說明：推薦使用第一種方式獲??；另外如果直接提交表單，也可以使用 select 的 name 屬性直接獲取，以 php 的 post 方式提交數(shù)據(jù)為例，代碼如下：

//獲取?。ㄊ?自治區(qū)）
$province=$_POST['province'];
//獲取市（區(qū)/自治州）
$province=$_POST['city'];
//獲取區(qū)（縣/市）
$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;}