中国省市区地址三级联动jQuery插件 案例下载

Posted 小月博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了中国省市区地址三级联动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插件 案例下载的主要内容,如果未能解决你的问题,请参考以下文章

jquery-实现省市区地址选择器三级联动

省市区三级菜单联动插件

jQuery简单的省市区县三级联动案例

PHP + jQuery + Json 实现中国省市区三级联动

c# 求WPF省市区三级联动代码,是从xml中得到省市区数据后添加到三个下拉列表。

jquery城市三级联动插件distpicker怎么引入