jQuery省市区镇四级联动插件citypicker.js

全屏阅读
  • 基本信息
  • 作者:
  • 作者已发布:920篇文章
  • 发布时间:2020年04月19日 16:53:03
  • 所属分类:Html5
  • 阅读次数:4364次阅读
  • 标签:

使用方法

引入四个文件

  • jquery.js  (请把这个放首位引入)

  • city-picker.data.js  (全国省市区数据都在这个文件里面)

  • city-picker.js  (js实现功能逻辑)

  • city-picker.css  (省市区县选择器样式,这个也可以不用,可以自己写个更好看的) 

html页面代码:

1
2
3
<div style="position: relative;">
    <input class="form-control" readonly type="text" data-toggle="city-picker" style="width:50%;">
</div>

方法

用data-toggle="city-picker"属性初始化

基本

1
2
3
<div style="position:relative;">
  <input readonly type="text" data-toggle="city-picker">
</div>

自定义占位符

1
2
3
<div style="position:relative;">
  <input readonly type="text" data-toggle="city-picker" placeholder="customized placeholder...">
</div>

响应宽度

1
2
3
<div style="position:relative;">
  <input readonly type="text" data-toggle="city-picker" data-responsive="true" style="width:50%;">
</div>

自定义省/市/区

1
2
3
<div style="position:relative;">
  <input readonly type="text" data-toggle="city-picker" value="江苏省/常州市/溧阳市">
</div>

用$.fn.city-picker方法初始化

基本

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

定制区域

1
2
3
4
5
$('#target').citypicker({
  province: '江苏省',
  city: '常州市',
  district: '溧阳市'
});

 

顶一下
(1)
50%
订阅 回复
踩一下
(1)
50%
» 郑重声明:本文由mpxq168发布,所有内容仅代表个人观点。版权归恒富网mpxq168共有,欢迎转载, 但未经作者同意必须保留此段声明,并给出文章连接,否则保留追究法律责任的权利! 如果本文侵犯了您的权益,请留言。

目前有 1 条留言 其中:访客:0 条, 博主:0 条

  1. 头像 mpxq168 : 2020年04月19日17:10:50 0楼
给我留言

您必须 [ 登录 ] 才能发表留言!