distpicker

2023-03-24 14:43| 来源: 网络整理| 查看: 265

distpicker是一款可以实现中国省市区地址三级联动的jQuery插件。它使用简单，只需要在HTML结构中使用一个容器来包裹一组元素，并通过data-toggle="distpicker"来进行初始化。你可以自定义数据源和默认值，也可以通过事件监听和方法来控制插件的行为。

distpicker的特点是：

简单易用，只需简单的HTML结构和属性设置即可实现三级联动效果支持自定义数据源和默认值，可以根据需要修改省市区的数据和显示支持事件监听和方法，可以在用户选择省市区时触发回调函数或者手动设置或重置插件的状态使用方法使用

引入js

HTML结构

初始化插件

$(function() { $('[data-toggle="distpicker"]').distpicker(); });

这个代码会在页面上显示一个三级联动的省市区选择器，其中默认值为广东省-广州市-天河区。你可以根据需要修改默认值或者数据源。

配置参数

distpicker有以下配置参数：

autoSelect：类型：Boolean，默认值：true。是否当省改变时自动选择市和区。 placeholder：类型：Boolean，默认值：true。是否显示占位文本。 province：类型：String，默认值：“—— 省 ——”。省的占位文本。 city：类型：String，默认值：“—— 市 ——”。市的占位文本。 district：类型：String，默认值：“—— 区 ——”。区的占位文本。 url：类型：String，默认值：“N/A”。数据源 URL，如果设置了该参数，则会忽略内置的数据源。 valueType: 类型: String, 默认值: “name”. 选中时返回的数据格式，可选 “name” 和 “code”。你可以通过$().distpicker(options)来修改默认的配置参数，或者通过$.fn.distpicker.setDefaults(options)来修改全局默认参数。方法

distpicker有以下可用方法：

getDistricts()方法是一个静态方法，它可以获取指定区域代码的下级区域列表，返回一个对象，如： $().distpicker('getDistricts'); // 中国 $().distpicker('getDistricts', 330000); // 浙江省 $().distpicker('getDistricts', 330100); // 杭州市

如果不传入参数，则获取所有的省份列表。

reset：重置插件的状态，恢复到初始值。 destroy：销毁插件的实例，移除所有的事件监听和数据。 set：手动设置插件的省市区值，参数为一个对象，如{province: “广东省”, city: “广州市”, district: “天河区”}。 get：获取插件的省市区值，返回一个对象，如{province: “广东省”, city: “广州市”, district: “天河区”}。

你可以通过$().distpicker(“method”)来调用这些方法，或者通过$().data(“distpicker”).method()来访问插件的实例。

github网址：https://github.com/fengyuanchen/distpicker

【本文地址】

公司简介

联系我们