js實現省市區三級聯動

電商平台或者一些網站的個人信息部分，通常會有填寫地址的功能。該功能一般分為二級聯動（省、市）和三級聯動（省、市、區），只需要JavaScript就可以實現。

這里介紹一種很簡潔易用的方法。參考地址：https://github.com/fengyuanchen/distpicker

獲取上面Github目錄下的dist/distpicker.js文件，然后准備一份jquery.js文件。

接下來，新建一個測試的HTML頁面。

首先，引入以上的兩個js文件：

【注意】jquery文件一定要在distpicker前面，否則無法生效

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/distpicker.js"></script>

然后，新建select選擇器：

<div><!-- container -->
  <select></select><!-- province -->
  <select></select><!-- city -->
  <select></select><!-- district -->
</div>

要想實現三級聯動，需要進行初始化，方法就是為div元素添加一個屬性：

<div data-toggle="distpicker">
  <select></select>
  <select></select>
  <select></select>
</div>

有時，根據自己需要，會為選擇框設定默認值，同樣需要為select元素添加屬性：

<div data-toggle="distpicker">
  <select data-province="---- 選擇省 ----"></select>
  <select data-city="---- 選擇市 ----"></select>
  <select data-district="---- 選擇區 ----"></select>
</div>