jQuery中国省市区地址三级联动插件Distpicker

所属分类:输入-选择框

 134572  283  查看评论 (71)
jQuery中国省市区地址三级联动插件Distpicker ie兼容6

简要教程

安装

可以通过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():销毁插件实例。


相关插件-选择框

纯js省市县三级联动

js省市县三级联动
  选择框
 23668  83

jQuery仿淘宝商品选配

jQuery仿淘宝商品信息选配效果
  选择框
 1332  16

jQuery仿京东移动端地址

jQuery移动端中国省市县级联插件
  选择框
 10303  80

移动端城市搜索选择(原创)

原创,代码简单易修改。类仿大众点评选择城市的部分,只是部分不必要功能没有。有备注!json可修改!
  选择框
 2053  18

讨论这个项目(71)回答他人问题或分享插件使用方法奖励jQ币

    mysir 0
    2018/4/14 9:39:12
    对于省市县选定后的信息插入数据库后,编辑时如何获取出来啊 回复
    有个名字真好 0
    2018/3/11 19:48:27
    引用了文件出现is not function 回复
    北落 0
    2018/3/5 12:15:30
    能给看下源码吗
    回复
    叶鹏辉 0
    2018/1/31 15:10:57

    您好,咱这块仅支持国内的吗

    回复
    木有饭 0
    2017/12/22 10:44:38
    1357469698 0
    2017/12/20 14:06:26

    如何获取选中的行政区划的值啊,就是对应的行政区划码

    回复
    ??? 0
    2017/11/29 11:09:00

    6666,惊了,支付宝登录都有

    回复
    欣艳 0
    2017/11/2 9:46:30

    作者:你的这些数据熟存在数据库中查询出来的吗?不是调用的api吗?

    回复
    lYFMinHua 0
    2017/10/10 18:01:54
    都弄到代码里去了,才发现好多地区都没有。。。。 回复
    偏执狂轩轩阿 0
    2017/8/23 20:09:00

    是不是把宝岛台湾的市区给漏写了查询没找到,应该不是有意而为之

        h e lD ="#"0
        2017/10/10 17:47:44

        还真是没有了

        怎么解决的?

    回复
取消回复