中國省市區地址三級聯動jQuery插件 案例下載

distpicker 是一款可以實現中國省市區地址三級聯動jQuery插件。它使用簡單，簡單設置即可完成中國省市區地址聯動效果。

安裝

可以通過npm或bower來安裝該三級聯動插件。

 

npm install distpicker
bower install distpicker

 

使用方法

HTML結構

基本的HTML結構是使用一個<div>容器來包裹一組<select>元素。

<div><!-- container -->
  <select></select><!-- 省 -->
  <select></select><!-- 市 -->
  <select></select><!-- 區 -->
</div>

你可以直接通過 data-toggle="distpicker"實現來進行初始化。

<div data-toggle="distpicker" ><!-- container -->
  <select></select><!-- 省 -->
  <select></select><!-- 市 -->
  <select></select><!-- 區 -->
</div>

也可以顯示占位文本。

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

或者自定義省市區。

<div data-toggle="distpicker">
    <select data-province="浙江省"></select>
    <select data-city="杭州市"></select>
    <select data-district="西湖區"></select>
</div>

初始化插件

在頁面DOM元素加載完畢之后，可以通過distpicker()方法來初始化該地址聯動插件。

$('#target').distpicker();

 

自定義占位文本：

$('#target').distpicker({
    province: '---- 所在省 ----',
    city: '---- 所在市 ----',
    district: '---- 所在區 ----'
});

 自定義省市區。

$('#target').distpicker({
    province: '浙江省',
    city: '杭州市',
    district: '西湖區'
});

配置參數

可以通過$().distpicker(options)來修改默認的配置參數，通過$.fn.distpicker.setDefaults(options)來修改全局默認參數。

• autoSelect：類型：Boolean，默認值：true。是否當省改變時自動選擇市和區。
• placeholder：類型：Boolean，默認值：true。是否顯示占位文本。
• province：類型：String，默認值：—— 省 ——。定義省份的初始值。如果在distpicker.data.js文件中存在該省份，將會被選擇，否則顯示占位文本。
• city：類型：String，默認值：—— 市 ——。定義市的初始值。如果在distpicker.data.js文件中存在該市，將會被選擇，否則顯示占位文本。
• district：類型：String，默認值：—— 區 ——。定義區的初始值。如果在distpicker.data.js文件中存在該區，將會被選擇，否則顯示占位文本。

方法

• reset([deep])：重置select為初始狀態。
  • deep (optional)：類型：Boolean，默認值：false。重置select為初始狀態。

  例如：

$().distpicker('reset');
$().distpicker('reset', true);

• destroy()：銷毀插件實例。

distpicker三級地址聯動插件的github地址為：https://github.com/fengyuanchen/distpicker