当前位置: 首页>編程日記>正文

html自动选择省市,jQuery中国省市区地址三级联动插件Distpicker

html自动选择省市,jQuery中国省市区地址三级联动插件Distpicker

20a6f760c63e038c63ac8394c8c0c3a2.png

3efc3516b7ecb765a1f067c294640f12.png

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

简要教程

安装

可以通过npm或bower来安装该三级联动插件。npm install distpicker

bower install distpicker

使用方法

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文件中存在该区,将会被选择,否则显示占位文本。

方法reset([deep]):重置select为初始状态。

deep (optional):类型:Boolean,默认值:false。重置select为初始状态。

例如:$().distpicker('reset');

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

destroy():销毁插件实例。


https://www.fengoutiyan.com/post/14774.html

相关文章:

  • jquery跨域请求
  • jquery添加css样式
  • vue地区选择器
  • vue实现省市区三级联动
  • 省市区三级联动的实现
  • 省市区三级联动思路
  • layui省市区三级联动
  • jquery动态添加css样式
  • 鏡像模式如何設置在哪,圖片鏡像操作
  • 什么軟件可以把圖片鏡像翻轉,C#圖片處理 解決左右鏡像相反(旋轉圖片)
  • 手機照片鏡像翻轉,C#圖像鏡像
  • 視頻鏡像翻轉軟件,python圖片鏡像翻轉_python中鏡像實現方法
  • 什么軟件可以把圖片鏡像翻轉,利用PS實現圖片的鏡像處理
  • 照片鏡像翻轉app,java實現圖片鏡像翻轉
  • 什么軟件可以把圖片鏡像翻轉,python圖片鏡像翻轉_python圖像處理之鏡像實現方法
  • matlab下載,matlab如何鏡像處理圖片,matlab實現圖像鏡像
  • 圖片鏡像翻轉,MATLAB:鏡像圖片
  • 鏡像翻轉圖片的軟件,圖像處理:實現圖片鏡像(基于python)
  • canvas可畫,JavaScript - canvas - 鏡像圖片
  • 圖片鏡像翻轉,UGUI優化:使用鏡像圖片
  • Codeforces,CodeForces 1253C
  • MySQL下載安裝,Mysql ERROR: 1253 解決方法
  • 勝利大逃亡英雄逃亡方案,HDU - 1253 勝利大逃亡 BFS
  • 大一c語言期末考試試題及答案匯總,電大計算機C語言1253,1253《C語言程序設計》電大期末精彩試題及其問題詳解
  • lu求解線性方程組,P1253 [yLOI2018] 扶蘇的問題 (線段樹)
  • c語言程序設計基礎題庫,1253號C語言程序設計試題,2016年1月試卷號1253C語言程序設計A.pdf
  • 信奧賽一本通官網,【信奧賽一本通】1253:抓住那頭牛(詳細代碼)
  • c語言程序設計1253,1253c語言程序設計a(2010年1月)
  • 勝利大逃亡英雄逃亡方案,BFS——1253 勝利大逃亡
  • 直流電壓測量模塊,IM1253B交直流電能計量模塊(艾銳達光電)
  • c語言程序設計第三版課后答案,【渝粵題庫】國家開放大學2021春1253C語言程序設計答案
  • 18轉換為二進制,1253. 將數字轉換為16進制
  • light-emitting diode,LightOJ-1253 Misere Nim
  • masterroyale魔改版,1253 Dungeon Master
  • codeformer官網中文版,codeforces.1253 B
  • c語言程序設計考研真題及答案,2020C語言程序設計1253,1253計算機科學與技術專業C語言程序設計A科目2020年09月國家開 放大學(中央廣播電視大學)
  • c語言程序設計基礎題庫,1253本科2016c語言程序設計試題,1253電大《C語言程序設計A》試題和答案200901
  • 肇事逃逸車輛無法聯系到車主怎么辦,1253尋找肇事司機