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

所属分类:输入-选择框

 436537  834  查看评论 (119)
分享到微信朋友圈
X
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():销毁插件实例。


相关插件-选择框

jQuery世界主要国家和地区联动

世界主要国家地区三级联动选择
  选择框
 23676  305

zTree 下拉插件(原创)

基于zTree实现的下拉树型菜单选择
  选择框
 26836  302

jQuery三级联动地区选择下拉插件

风格简洁大方,地区信息可以外部传入,地区信息使用按首字母归类排序
  选择框
 40094  384

jquery各大学选择插件

jquery text选择器点击事件弹出层选择学校value赋值
  选择框
 29775  328

讨论这个项目(119)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    一语 0
    2021/7/15 11:43:13
    bootstrap的js去掉会有什么影响吗 回复
    太极凌云 0
    2021/1/4 17:03:43
    在iphone6点击第二个出现了省,在iphone6上不兼容,作者怎么解决??? 回复
    你真闹。 0
    2020/8/17 18:45:39
    有没有四级的啊,精确到乡镇
        0.00
        2021/2/3 18:44:55
        你真闹。
    回复
    你好啊jys 0
    2020/3/18 21:21:57
    ios不兼容啊
        太极凌云0
        2021/1/4 17:45:50
        是在iphone6上?
    回复
    跨越七海的风 0
    2019/8/15 14:51:32
    自定义省市区这块如果我只定义省和市,会自动定义区为那列的第一个,有没有办法不让它定义,比如说我要的展示:广东省 广州市 请选择区
        ??0
        2019/11/7 10:06:45
        找到解决办法了吗?
    回复
    @¥@ 0
    2019/8/8 18:23:03
    这个里面省市区的数据不完整 该怎么办呢 回复
    Gzj 0
    2019/5/16 18:51:08
    情凄意切?? 0
    2019/4/20 14:16:59
    我想问下一种情况,当选中第一级“省”的时候,我直接选择第三级“区”,我该怎么获取到第二级“市”的内容
        橱窗外的小孩0
        2019/4/28 11:35:51
        第二级市都没有选择,怎么能获取到区的
    回复
    晒冷 0
    2019/4/3 14:22:39
    反馈一下,广东东莞的区是出错的
        zhusky0
        2019/7/29 15:49:16
        中山也是错的
        ゞ优0
        2019/8/27 13:47:36
        你们看好情况反馈,直接下载的demo是16年的 data数据是1.0.4版本 而现在npm下载的已经是2.0了
    回复
    ㄈ夏至微风』 0
    2019/3/11 18:03:46
    急急急~~~~~~~~~你好 修改地址的时候 怎么给selsect赋值呢
        Today。1
        2019/3/16 11:04:49
        getList: function(data) {
            var list = [];
        
            $.each(data, function(i, n) {
                list.push(
                    '<option' +
                    ' value="' + (n.address && n.code ? n.code : '') + '"' +
                    ' data-code="' + (n.code || '') + '"' +
                    (n.selected ? ' selected' : '') +
                    '>' +
                    (n.address || '') +
                    '</option>'
                );
            });
        
            return list.join('');
        },

        value 值改为code 赋值$("#xxx").val(xxx)

        入心三分、0
        2019/4/9 5:34:04
        能不能麻烦您给个实例看看,有点看不太懂. 我存到数据库的数据直接是省市区的value值没有其他的值了,省市区的值都放在一个字段用 | 隔开了,返回的省市区的值在修改页面处用explode()拆分成数组之后 在这里回显我要怎么去做呢
        WHO0
        2019/4/28 12:00:31
        这样的修改方式 做插件 不觉得可笑么
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复