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

所属分类:输入-选择框

 225132  392  查看评论 (96)
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():销毁插件实例。


相关插件-选择框

模糊查询的下拉框

下拉框的样子,上面可以输入带有查询功能
  选择框
 30287  144

酷炫的发光单选框

发光的动态竖直单选框
  选择框
 7470  43

jQuery原创全国省份城市学校三级联动下拉列表

国内所有高校,按着省份,城市,学校,三级联动下拉列表。更能方便选择学校,学校为最新最全!!!!
  选择框
 8353  38

jQuery世界地区三级联动

jQuery世界地区三级联动带搜索功能
  选择框
 17434  83

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

    804154692 0
    2019/1/15 14:15:04
    很好很强大啊! 回复
    香蕉不娇 0
    2019/1/2 21:52:22
    月芽痣,情殇苦 0
    2018/12/5 11:38:39
    这个怎么用js打印到控制台呀 回复
    没事抽抽风? 0
    2018/11/20 14:42:27
    怎样拿到option的data-code的值
    回复
    鸿鹄焉知燕雀难吃 0
    2018/10/24 11:44:09
    为什么提交的时候是文本,不是提交的地区编号
        懒懒的失踪...0
        2018/11/19 13:52:41
        怎么样才能得到返回的文本,该怎么获取返回值。。。
        qiocean1
        2019/1/2 17:31:39
        $('#city1').on('change', function(e) {
            var val = $('#city1').find('option:selected').attr('data-code');
            console.log(val)
        })
    回复
    雁之 0
    2018/9/5 11:10:20
    つ滂.?秣?。 0
    2018/8/30 9:09:58
    如何绑定多个动态生成的元素?好像行不通?求大神支招呀。 回复
    hera 0
    2018/8/28 10:34:45
    阿灿. 0
    2018/8/23 18:44:48
    如果数据是3个接口的话如何使用?而且每个接口id都可能相同,是不是无法使用 回复
      0
    2018/7/13 12:28:11
    请问怎样支持数据回显
        ✘じike •ิ.•ั1
        2018/7/23 18:53:31

        我是这样做的,

        $distpicker.distpicker({
            autoSelect: false,
            province: '--请选择--',
            city: '--请选择--',
            district: '--请选择--'
        });

        我的是C# 代码  

        <select class="form-control" data-province="@(Model==null?" --请选择-- ":Model.Province)" style="width:30%;display:inline-block" name="Province" required></select>
        <select class="form-control" data-city="@(Model==null?" --请选择-- ":Model.City)" style="width:30%;display:inline-block" name="City" required></select>
        <select class="form-control" data-district="@(Model==null?" --请选择-- ":Model.District)" style="width:30%;display:inline-block" name="District" required></select>
        guozhaoxin0
        2018/12/27 20:09:40
        有具体的用法嘛?
    回复
取消回复
  短信接口