1. 最近找省市區(qū)得插件咨察，真是好崩潰啊，找的插件大部分都有這樣得問題：

• 首先省市區(qū)三級聯(lián)動功能都沒問題黔攒。
• 最大的問題是 區(qū) / 縣 數(shù)據(jù)問題：
  • 舊版本的插件球散，區(qū)縣數(shù)據(jù)包含鎮(zhèn)級地名，大多都重復 城關鎮(zhèn)添忘，比如河南省洛陽市下面的區(qū)縣重復多個城關鎮(zhèn) 這個地名采呐。

image

• 新版 的區(qū)/縣下包含：區(qū)、縣搁骑、地級市斧吐，取消了XX鎮(zhèn)；
  • 以我大洛陽為例：九縣六區(qū)（實際是八縣加一個地級市）仲器，老數(shù)據(jù)就會重復多個城關鎮(zhèn)煤率。
• 新版的數(shù)據(jù)，將舊的 XX鎮(zhèn) 都去掉了娄周，并做了數(shù)據(jù)整合涕侈。
• 要么就是去請求city.json，跨域煤辨，繞不過瀏覽器，搞不定
• 還有就是 寶島臺灣 有的插件有數(shù)據(jù)木张，有的插件沒數(shù)據(jù)众辨。
• 再有一個問題就是：省市區(qū)三個的位置是否可以隨便調(diào)？
  • 大部分插件 省市區(qū) 包裹在同一個 div下舷礼，不能分開寫鹃彻；
  • 個別，比如我上次寫的area.js妻献，就支持省市區(qū)隨便放,但它的數(shù)據(jù)有點老舊蛛株，重復的多团赁。
• 還有一個加密的js文件，雖然能用谨履，但是誰會引個看不懂的文件到項目中去嘞欢摄。

2.下面說個jq的distpicker插件，做省市區(qū)聯(lián)動

2.1 下載distpicker插件

使用npm或者bower命令

• npm install distpicker
• bower install distpicker

我用npm好像第一次下載不成功笋粟，使用bower立馬就能下載,文件目錄如下：

image

[圖片上傳失敗...(image-173ad0-1514381900420)]

2.2 然后就是引用

<script type="text/javascript" src="../libs/jquery-3.2.1/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="distpicker/dist/distpicker.min.js"></script>

2.3 html使用

<div id="target"><!-- container -->
  <select></select><!-- 省 -->
  <select></select><!-- 市 -->
  <select></select><!-- 區(qū) -->
</div>

• js初始化插件

<script>
$(function(){
        $('#target').distpicker();
});
</script>

• 默認效果：

  
  
  image

• 自定義占位文本：

$('#target').distpicker({
             province: '--請選擇省份--',
             city: '--請選擇市--',
             district: '--請選擇區(qū)/縣--'
});

• 自定義省市區(qū)：

$('#target').distpicker({
                    province: '河南省',
                    city: '洛陽市',
                    district: '伊川縣'
                });   

• 效果如圖：

image

2.4也可以直接初始化怀挠，不用js操作

使用data-toggle="distpicker", 固定寫法，寫錯無效害捕！

image

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

2.4.2 使用顯示占位文本：

默認選中的太難看绿淋，可用于換默認顯示的項

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

2.4.3 自定義省市區(qū)，也可以默認選中某個省市區(qū)尝盼？

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

2.5 以上幾種寫法的效果：

image

3. 怎么抓取選中的值吞滞？

• Angular：使用ng-model，或添加ng-click/ng-change事件盾沫，抓取val;
• jQ：button添加click事件裁赠，抓取$().val();
  或.bind("change", function(){ // console.log( $().val)});

4.怎么修改默認的配置參數(shù)？

4.1 修改默認的配置參數(shù):

$().distpicker(options)

4.2修改全局默認參數(shù):

$.fn.distpicker.setDefaults(options)

• autoSelect：類型：Boolean疮跑，默認值：true组贺。
  • 是否當省改變時自動選擇市和區(qū)。
• placeholder：類型：Boolean祖娘，默認值：true失尖。
  • 是否顯示占位文本。
• province：類型：String渐苏，
  • 默認值：―― 省 ――,定義省份的初始值掀潮。
  • 如果在distpicker.data.js文件中存在該省份，將會被選擇琼富，否則顯示占位文本仪吧。
• city：類型：String
  • 默認值：―― 市 ――,定義市的初始值。
  • 如果在distpicker.data.js文件中存在該市鞠眉，將會被選擇薯鼠，否則顯示占位文本。
• district：類型：String
  • 默認值：―― 區(qū) ――,定義區(qū)的初始值械蹋。
  • 如果在distpicker.data.js文件中存在該區(qū)出皇，將會被選擇，否則顯示占位文本哗戈。

5. 重置方法示例：

• reset([deep])：重置select為初始狀態(tài)郊艘。

• deep (optional)：類型：Boolean，默認值：false。重置select為初始狀態(tài)纱注。

$().distpicker('reset');
$().distpicker('reset', true);
destroy()：銷毀插件實例畏浆。