jq 省市区三级联动插件 ：distpicker

1. 最近找省市区得插件，真是好崩溃啊，找的插件大部分都有这样得问题：

• 首先省市区三级联动功能都没问题。
• 最大的问题是 区 / 县 数据问题：
  • 旧版本的插件，区县数据包含镇级地名，大多都重复 城关镇，比如河南省洛阳市下面的区县重复多个城关镇 这个地名。

image

• 新版 的区/县下包含：区、县、地级市，取消了XX镇；
  • 以我大洛阳为例：九县六区（实际是八县加一个地级市），老数据就会重复多个城关镇。
• 新版的数据，将旧的 XX镇 都去掉了，并做了数据整合。
• 要么就是去请求city.json，跨域，绕不过浏览器，搞不定
• 还有就是 宝岛台湾 有的插件有数据，有的插件没数据。
• 再有一个问题就是：省市区三个的位置是否可以随便调？
  • 大部分插件 省市区 包裹在同一个 div下，不能分开写；
  • 个别，比如我上次写的area.js，就支持省市区随便放,但它的数据有点老旧，重复的多。
• 还有一个加密的js文件，虽然能用，但是谁会引个看不懂的文件到项目中去嘞。

2.下面说个jq的distpicker插件，做省市区联动

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><!-- 区 -->
</div>

• js初始化插件

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

• 默认效果：

  
  image

• 自定义占位文本：

$('#target').distpicker({
             province: '--请选择省份--',
             city: '--请选择市--',
             district: '--请选择区/县--'
});

• 自定义省市区：

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

• 效果如图：

image

---

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

使用data-toggle="distpicker", 固定写法，写错无效！

image

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

2.4.2 使用显示占位文本：

默认选中的太难看，可用于换默认显示的项

<div data-toggle="distpicker">
  <select data-province="---- 选择省 ----"></select>
  <select data-city="---- 选择市 ----"></select>
  <select data-district="---- 选择区 ----"></select>
</div>

2.4.3 自定义省市区，也可以默认选中某个省市区？

<div data-toggle="distpicker">
  <select data-province="浙江省"></select>
  <select data-city="杭州市"></select>
  <select data-district="西湖区"></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.怎么修改默认的配置参数？

4.1 修改默认的配置参数:

$().distpicker(options)

4.2修改全局默认参数:

$.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文件中存在该区，将会被选择，否则显示占位文本。

---

5. 重置方法示例：

• reset([deep])：重置select为初始状态。

• deep (optional)：类型：Boolean，默认值：false。重置select为初始状态。

$().distpicker('reset');
$().distpicker('reset', true);
destroy()：销毁插件实例。