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

码龄16年

关注

转载最新推荐文章于 2024-09-13 22:25:46 发布 1k 阅读

jQuery distpicker省市区三级联动 1、下载distpicker插件使用npm命令 npm install distpicker@2.0.4 --save 2、引用（在ts文件中） require('distpicker'); // 三级联动的插件 let $ = require('jquery'); 3、HTML中 <div id="distpicker" > <select id="p... 阅读详情

下载地址

distpicker是一款可以实现中国省市区地址三级联动jQuery插件。它使用简单，简单设置即可完成中国省市区地址联动效果。使用方法HTML结构基本的HTML结构是使用一个

容器来包裹一组元素。

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

也可以显示占位文本。

或者自定义省市区。

初始化插件在页面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文件中存在该区，将会被选择，否则显示占位文本