其他代码

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

阿里云

distpicker 是一款可以实现中国省市区地址三级联动 jQuery 插件。它使用简单,简单设置即可完成中国省市区地址联动效果。

HTML 结构:

基本的 HTML 结构是使用一个[div]容器来包裹一组[select]元素。

也想出现在这里?联系我们
创客主机
  1. <div><!-- container -->
  2.   <select></select><!---->
  3.   <select></select><!---->
  4.   <select></select><!---->
  5. </div>

你可以直接通过 data-toggle="distpicker"实现来进行初始化。

  1. <div data-toggle="distpicker"><!-- container -->
  2.   <select></select><!---->
  3.   <select></select><!---->
  4.   <select></select><!---->
  5. </div>

也可以显示占位文本。

  1. <div data-toggle="distpicker">
  2.   <select data-province="---- 选择省 ----"></select>
  3.   <select data-city="---- 选择市 ----"></select>
  4.   <select data-district="---- 选择区 ----"></select>
  5. </div>

或者自定义省市区。

  1. <div data-toggle="distpicker">
  2.   <select data-province="浙江省"></select>
  3.   <select data-city="杭州市"></select>
  4.   <select data-district="西湖区"></select>
  5. </div>

初始化插件:

在页面 DOM 元素加载完毕之后,可以通过 distpicker()方法来初始化该地址联动插件。

  1. $('#target').distpicker();

自定义占位文本:

  1. $('#target').distpicker({
  2.   province: '---- 所在省 ----',
  3.   city: '---- 所在市 ----',
  4.   district: '---- 所在区 ----'
  5. });

自定义省市区。

  1. $('#target').distpicker({
  2.   province: '浙江省',
  3.   city: '杭州市',
  4.   district: '西湖区'
  5. });

配置参数:

可以通过$().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 为初始状态

例如:

  1. $().distpicker('reset');
  2.     $().distpicker('reset', true);

destroy():销毁插件实例。

distpicker 三级地址联动插件的 github 地址为:https://github.com/fengyuanchen/distpicker

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

已有 732 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!