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

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

  • 首先省市区三级联动功能都没问题
  • 最大的问题是 区 / 县 数据问题
    • 旧版本的插件,区县数据包含镇级地名,大多都重复 城关镇,比如河南省洛阳市下面的区县重复多个城关镇 这个地名。
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立马就能下载,文件目录如下:


jq 省市区三级联动插件 :distpicker_第2张图片
image

[图片上传失败...(image-173ad0-1514381900420)]

2.2 然后就是引用


2.3 html使用
  • js初始化插件

  • 默认效果:


    jq 省市区三级联动插件 :distpicker_第3张图片
    image
  • 自定义占位文本:
$('#target').distpicker({
             province: '--请选择省份--',
             city: '--请选择市--',
             district: '--请选择区/县--'
});
  • 自定义省市区:
$('#target').distpicker({
                    province: '河南省',
                    city: '洛阳市',
                    district: '伊川县'
                });   
  • 效果如图:
jq 省市区三级联动插件 :distpicker_第4张图片
image

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

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

jq 省市区三级联动插件 :distpicker_第5张图片
image
2.4.2 使用显示占位文本:

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

2.4.3 自定义省市区,也可以默认选中某个省市区?
2.5 以上几种写法的效果:
jq 省市区三级联动插件 :distpicker_第6张图片
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():销毁插件实例。

你可能感兴趣的:(jq 省市区三级联动插件 :distpicker)