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

所属分类:输入-选择框

 53009  280  查看评论 (23)
分享到微信朋友圈
X
jQuery省市区镇四级联动插件citypicker.js ie兼容8

使用方法

引入四个文件

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

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

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

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

html页面代码:

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

方法

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

基本

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

自定义占位符

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

响应宽度

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

自定义省/市/区

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

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

基本

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

定制区域

$('#target').citypicker({
  province: '江苏省',
  city: '常州市',
  district: '溧阳市'
});
相关插件-选择框

jQuery地区选择(三级联动)

jQuery中国地区选择(最新地区数据全)三级联动插件
  选择框
 30150  238

jQuery房屋位置选择单选,整行选,全选

一个智能管理系统的楼层房屋选择
  选择框
 22523  248

js实现美化的下拉框菜单插件

用div+ul实现的下拉框,用户可通过修改样式来定义自己喜欢的风格。
  选择框
 52578  284

简单的jQuery多选下拉框

单纯的写了一个 平常用到的下拉框
  选择框
 31583  247

讨论这个项目(23)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Dynamic 0
    2020/7/14 14:50:29
    有bug,有能维护一下吗?
    bug描述:选择完所有地址后,再修改省市,其他不修改的情况下,会出现省市与县区不对应,形成错误地址。 回复
    John.C 0
    2020/2/25 13:48:56
    有bug,试试拉下地址广东省中山市、东莞市看看。头痛……没找到问题出现在哪…… 回复
    2010-11-1 0
    2019/12/16 16:57:47
    给文本框赋值之后,下面框中如何选中呢 回复
    0
    2019/10/29 19:06:57
    这个有个bug,选完省市县区之后,再重新回到省点击其他任意省,只会清除市,不会清除县区,就出现了错误的地址,而且js代码耦合度巨高,想自己改难度太高
        FirZen.0
        2020/1/9 14:03:34
        大佬 这个问题解决了吗
    回复
    朱陈燕 0
    2019/7/25 11:15:47
    这个插件如何取值?还有就是这个是否兼容H5移动端项目? 回复
    纵马. 0
    2019/3/18 14:30:46
    苹果手机上 用不了 有什么办法解决吗‘
    红包谢
        随风灬倾舞0
        2019/5/10 11:59:51
        大佬 我也碰到这问题了 你解决了嘛
    回复
    -Pu 0
    2018/11/14 21:38:27
    乐我所有 0
    2018/9/19 21:05:42
    请问通过npm的方式安装后,怎么使用 回复
    流云 0
    2018/9/19 16:29:58
    您好 添加后如何设置修改
        王同飞1
        2018/10/31 16:59:49


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

        放到想要使用的模块内即可,找到类名修改样式(不要在city-picker.css内修改奥)

    回复
    陈二佳 0
    2018/9/18 13:47:11
    iphone上无法用
        陈二佳0
        2018/9/18 14:10:45
        可以了,加载min.js然后css载入放在js前面,我其他也没有改什么
        -Pu0
        2018/11/14 22:09:40
        为什么我的不行
        朱陈燕0
        2019/8/14 15:35:44
        您好,我想问一下iphone上面可以兼容吗?
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复