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

中国省市区地址三级联动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

未经允许不得转载:小月博客 » 中国省市区地址三级联动jQuery插件
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(1) 打赏

评论35

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #24
    这个插件更简单一些:http://www.aijquery.cn/Html/chajian/cityselect/115.html
    aijquery2018-07-09 10:28:37回复
  2. #23
    世事无常,但这个博客定能永保辉煌!
    yihuanghou2017-04-17 8:19:46回复
    • 借你吉言,哈哈
      小月2017-04-17 14:40:30回复
  3. #22
    好像很久没写文章了?
    疯子蚁2017-04-14 16:36:33回复
    • 好久没有写文章了,我也休息了好久了
      小月2017-04-17 14:33:12回复
  4. #21
    支持,只有支持才是访问博客的正确方式!
    hanjian2017-04-14 14:13:07回复
    • 感谢只有感谢
      小月2017-04-17 14:33:31回复
  5. #20
    很荣幸来访您的博客,留言只是证明我来过!
    衣皇后2017-04-11 15:59:57回复
    • 回复,证明我很欢迎!
      小月2017-04-17 14:33:49回复
  6. #19
    对你爱爱爱不完,我可以天天月月年年看你博客到永远!
    衣皇后2017-04-05 14:19:36回复
    • 愿你永远保持你爱的热度。
      小月2017-04-17 14:34:39回复
  7. #18
    从百度进来的,博客不错哦!
    衣皇后2017-04-03 14:57:48回复
    • 谢谢噢,只是很久没有更新了
      小月2017-04-17 14:34:56回复
  8. #17
    好久没来了,我来逛逛。
    知更鸟4.2破解版2017-04-02 6:39:42回复
    • 常来哦知更鸟
      小月2017-04-17 14:35:15回复
  9. #16
    学习使人进步,到此拜读!
    衣皇后2017-03-31 8:22:52回复
  10. #15
    富强、民主、文明、和谐,自由、平等、公正、法治, 爱国、敬业、诚信、友善。
    QQ3546454372017-03-28 8:03:14回复
  11. #14
    富强、民主、文明、和谐,自由、平等、公正、法治, 爱国、敬业、诚信、友善。
    QQ5139913682017-03-27 13:52:32回复
  12. #13
    感觉不错哦,认真拜读咯!
    增达网QQ-195627282017-03-26 8:14:30回复
  13. #12
    感觉不错哦,认真拜读咯!
    增达网QQ-382170792017-03-25 16:34:34回复
  14. #11
    真是时光荏苒!
    增达网QQ-330922902017-03-20 16:22:42回复
  15. #10
    从百度进来的,拜读一下贵站博文先 丁酉年(鸡)二月十五 2017-3-12
    增达网2017-03-12 10:54:30回复
    • 哇偶,似乎有纪念性意义
      小月2017-04-17 14:36:52回复
  16. #9
    大王叫我来巡山,我把博客转一转。(*^__^*) 嘻嘻……
    Feeey个人博客2017-03-11 22:10:00回复
  17. #8
    就是喜欢看你博客!
    增达网2017-03-06 12:36:51回复
  18. #7
    拜读大侠博客,感悟人生道理!
    三五豪侠传2017-03-01 9:25:17回复
  19. #6
    博主最近没怎么更新啊,我来转转。
    Feeey个人博客2017-02-28 8:43:49回复
    • 最近挺迷茫的,不知道该做些什么,工作三年了快突然迷茫了
      小月2017-02-28 10:25:16回复
  20. #5
    简约不简单,大气有内涵!
    九州套图2017-02-18 9:51:39回复
  21. #4
    我又来咯~~无聊来逛逛,情人节快乐。
    Feeey个人博客2017-02-14 21:44:55回复
    • 迟来的回复愿你开心 哦
      小月2017-04-17 14:40:02回复
  22. #3
    来看看咯~
    九州套图2017-02-06 12:44:43回复
  23. #2
    又是一年,祝博主要啥有啥想啥来啥总之不缺啥!
    九州套图2017-02-01 10:14:35回复
    • 谢谢哦,我感觉我就想要一只可爱的萨摩宝宝
      小月2017-02-28 10:34:13回复
  24. #1
    挺不错的,代码可以研究一下的。。
    精选故事网2017-01-21 16:26:23回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏