jQuery省市区三级联动插件(可自定义样式)

所属分类:输入-选择框

 46088  489  查看评论 (64)
分享到微信朋友圈
X
jQuery省市区三级联动插件(可自定义样式) ie兼容8

更新时间:2018/3/5 下午6:48:17

更新说明:
(1)支持地区的code编码获取,地区的code编码在 input type="hidden" class="pick-area"中使用$(".pick-area").attr("data-codearea")获取。

(2)加入“请选择省”、“请选择市”、“请选择县”选项

注意:

(1)为了更好地理解和使用这个插件,请打开控制台,使用使用实例中给出的例子,一遍操作,一遍查看页面中元素的变化。

(2)可以在回调函数中使用

$(".pick-area").attr("data-codearea")

获取code码,

$(".pick-area").val()

获取省市县的值。


更新时间:2017/11/8 上午11:45:33

更新说明:本次更新后的版本为1.0.2,修改内容如下:

1. 将插件最外围的包裹元素由之前的标签替换为了标签。(原因:使用的时候,在火狐下不能拖动滚动条。)

2. 支持设置最外围的包裹元素div.pick-area的display:;属性和float:;属性

3. 修复在标签里引用

时,插件不能自动由省跳到市,由市跳到县的选择。(重新编写了鼠标点击页面其它空白区域时,下拉框隐藏的功能。以前这一块的编写方案会导致在标签里引用

时,插件不能自动由省跳到市,由市跳到县的选择。)


更新时间:2017/10/31 下午4:07:02

更新说明:更新后的版本为v1.0.1,增加了:

1. 对AMD、CommonJs(Node.js使用的模块规范)的支持,可以进行模块调用。

2. 点击下拉箭头,“默认”弹出“省”的选择框。

3. 下拉框弹出时,可以记忆该处span(用于存放和显示用户选中的数据,省市县各用一个span进行存放)已经存放的数据,让已选择的文本内容高亮显示。

4. 让下拉框中的每一个li的padding-left与文本框.pick-area的padding-left一致,不至于修改padding-left过大或者过小时,上下显示错乱的问题。

5. 下拉框每一个li单行文本溢出时,省略号显示。

6. 请尊重作者的原创成果,切勿将该插件当做自己的插件进行发布。如有任何疑问请发邮yangyang2010cs@163.com,谢谢!


1.数据初始化,提供两种数据初始化的方式

1.两种省市县数据初始化方式的属性为:a标签中的name和pickArea方法中的format参数,这两个参数的格式必须为“省/市/县”、“省/市”、“省”;
    (1)只要设置了format,并且format!="",就以format格式为主,就不管有没有设置name属性了
    (2)如果设置了name,并且name!=""且format没有设置任何值(即format不写,或者为""),则以name格式为主
    (3)其它的,就会自动生成“请选择省/请选择市/请选择县”2.那么,会有人问,为什么要提供“a标签中的name和pickArea方法中的format参数”这两种数据回显或者初始化的方式呢?按照常规的插件使用方法,直接使用pickArea方法中的format参数就可以了啊?是的,平时前端人员直接使用“pickArea方法中的format参数”来初始化数据就可以了,但是在有的公司,页面的数据渲染是由后端来完成的,就比如我们公司,一开始数据渲染都是由后端使用gsp标签直接在html里就把数据渲染完了,那么,这时候,他们使用“a标签中的name”属性来渲染数据,显得更为方便。当然,这样写完之后,还是要用$("调用元素").pickArea();方法来init插件,只是不用在pickArea方法中使用format回显数据了。

2.样式友好化:样式可修改

插件使用时,自己可手动传参修改的样式有:
(1)字体颜色-color、大小-fontSize
(2)文本边框的颜色-borderColor
(3)下拉框边框的颜色-listBdColor,文本框的宽度-width、高度-height(下拉框里每个li元素的高度和文本框的高度一样)
(4)下拉箭头的颜色-arrowColor和距离边框右侧的距离-arrowRight
(5)“省”这个数据所在的span标签相对文本边框左侧的距离-paddingLeft
(6)鼠标滑过时的背景颜色-hoverColor
(7)数据列表的包裹元素ul.pick-list的最大高度-maxHeight

3.事件回调

1.事件回调函数为参数中的"getVal",在这个方法中可以获得两个有用的值:
(1)$("."+$(".pick-area-dom").val())
 .pick-area-dom是插入页面中的隐藏域input[type==hidden]的类名,它的value值存放着getVal()回调函数触发一次之后,记录的调用插件的那个a元素,这个值(即$(".pick-area-dom").val())是一个类名,该类名唯一那么$("."+$(".pick-area-dom").val())就是当前调用插件的那个a元素了。
这个返回的是调用这个插件的元素pick-area,$(".pick-area-dom").val()的值是该元素的另一个class名,这个class名在dom结构中是唯一的,不会有重复,可以通过这个class名来识别这个pick-area。比如使用方法6,使用了$(".pick-area6").pickArea({...})初始化两个类名为pick-area6的>元素,结果就是产生两个样式一摸一样的省市区插件(颜色为橙色),但是这两个>都有属于自己的唯一的一个class名,
(2)$(".pick-area-hidden").val()
 这个是页面中隐藏域.pick-area-hidden,即类名为pick-area-hidden的input[type==hidden]的值,存放着每次选中一个省、市或者县的时候,
 当前调用插件的a元素的文本框中存放的省市县的最新值,每点击一次下拉框里的li,这个值就会立即更新,和$("."+$(".pick-area-dom").val())是一样的。
 记住,$("."+$(".pick-area-dom").val())和$(".pick-area-hidden").val()这两个值在某些应用场景会很有用!!!慢慢理解他们的用处!!!
 可以参考下面的每一个使用方法,在每个使用方法中,都使用了这两个值,并且为了测试作用,后面都跟了一个input框,来显示每次getVal触发执行一次之后,当前插件的最新值。

4.数据支持三种格式:“省/市/县”、“省/市”、“省”

例如:  1.在需要初始化数据的时候:
        (1)“山东省/临沂市/兰陵县”
        (2)“江苏省/南京市”
        (3)“广东省”
        2.如果不需要进行初始化数据,插件提供了四种方式:
        (1)name和format均不写,或者name=""并且"format":""  -------> 效果是“请选择省/请选择市/请选择县”
        (2)province/city/county  -------> 效果是“请选择省/请选择市/请选择县”
        (3)province/city  -------> 效果是“请选择省/请选择市”
        (4)province  -------> 效果是“请选择省”

5.新的全国省市县json数据

该插件提供的省市县json数据是国家统计局于2016年7月份发布的,数据很新,几乎可以满足使用需求。现在网上找到的省市县插件的数据都很旧,很多都不能满足使用需求了,再加上大部分插件使用方法不灵活,所以我才被迫写了这个插件。

6.其它注意事项

(1)***在调用插件pickArea方法时,任何的参数,要么不传,要么就给出值,不可以为""、空格或者其它不符合规则的值,这几乎是任何插件都遵守的规则,记住这一点,使用起来就不会出错。***例如:"hoverColor":""是不允许的,但是可以不传这个值。
(2)所有的跟像素有关的,单位可以带px或者不带都可以的。
(3)任何跟颜色有关的,要么是red、green一类的,要么是#333、#3399ff一类的,或者跟色值有关的rgb、rgba等正确的色值。
(4)该插件基于jquery1.8.2开发,使用了jQuery.isEmptyObject()和$().parentsUntil()这两个方法,你们在使用的时候,注意一下自己的jquery版本是否支持这两个方法。
(5)兼容到IE7及其以上,电脑上没有IE6,所以就没考虑,但是也可以用;其它的主流浏览器均可兼容。
(6)一个页面中如果有多处使用了pick-area插件,就如你现在所看到的这个页面,为了给介绍使用方法,我初始化了很多这个插件。
     你可以看到的是,每个<a href="javascript:void(0)" class="pick-area">中都使用了.pick-area这个类名,这个类名必须要有,这是宿主类名,上面还包括很多样式。另外 你还可以自己再在某一个<a>中再添加单独的类名,这样可以用以把这个<a>和其它的<a>区分开来,尤其是你自己取值的时候和初始化两个数据不一样的<a href="javascript:void(0)" class="pick-area">的时候,很方便了。比如:<a href="javascript:void(0)" class="pick-area pick-area1">和<a href="javascript:void(0)" class="pick-area pick-area2">就可以分别用类名pick-area1和pick-area2来初始化他们,并且识别再取值。当然了,你可以看到方法6,我用自定义类名pick-area6初始化了三个一模一样的<a href="javascript:void(0)" class="pick-area">,数据一样,样式也一样,那么,我又该怎么区分他们呢?不要怕,插件还专门给每一个<a>又单独起了一个类名,这个类名是每个<a>自己的唯一的标识,这个类名可以在getVal回调函数中可以获得,就是隐藏域<input type="hidden" class="pick-area-dom"/>的值。这个值用法很多,作用很大,看你自己如何灵活运用了。
     如图6-1你可以看到,我刚初始化了一个<a href="javascript:void(0)" class="pick-area pick-area4">,我还没有去触发getVal回调,
     但是在<a href="javascript:void(0)" class="pick-area pick-area4">中已经多出了一个类名FKGEPAYSSE1509076095000,当我去触发一次getVal回调函数,这时<input type="hidden" class="pick-area-dom"/>中就存放了这个类名。如果这时我接着去点击了方法5中的内容,既触发了方法5中的getVal,又把<input type="hidden" class="pick-area-dom"/>中的value值更新为当前属于方法5中<a href="javascript:void(0)" class="pick-area pick-area5">的唯一的类名。
相关插件-选择框

bootstrap下拉列表插件

bootstrap插件一款基于jquery bootstrap的下拉列表插件 ,有很多样式的下拉框
  选择框
 63730  498

双向选择表格(支持IE8及以上)

双向选择表格,支持自定义查询条件(支持下拉框)、自定义表头和数据格式(表格支持链接)、单选全选、选择事件、动态修改数据等功能,具体可以查看示例
  选择框
 17115  197

zTree 下拉插件(原创)

基于zTree实现的下拉树型菜单选择
  选择框
 29800  319

js城市查询器(完美仿携程)

高仿携程城市查询器在之前楼主版本上进行改进,添加了拼音简写索引,添加了字母标识与分割,简化了插件引入
  选择框
 47249  418

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

    见习.Cc 0
    2021/6/24 16:01:18
    有点 扯蛋
    只能引入pick-pcc.js,
    否则引入 pick-pcc.min.1.0.4.js 会报错,
    提示 $('.pick-area1').pickArea is not a function 回复
    evans22 0
    2020/8/5 11:40:08
    你好,请问如果选择了“请选择省”,“请选择市,“请选择区”这几个选择没有进入回调?我需要选择这几个也进入回调函数,获取这些返回值 回复
    不服开G秒我? 0
    2020/6/2 12:19:10
    大神,怎么把数据库中的省市区的数据拿出来显示在插件上,求详细点的指点
        areyouOk0
        2020/6/2 12:35:36
        先把数据库中的省市数据全部拿出来生成静态文件,在用插件调用。
    回复
    Isobel 0
    2020/5/28 21:19:30
    如果这个插件放在一个页面中引用,这个页面存在的其他a标签的点击事件失效,怎么处理? 回复
    じ何处惹尘埃ン 1
    2020/2/16 16:55:20

    在使用说明中的 :

    $(".pick-area").attr("data-codearea")

    获取code码 后面的字段有问题,应该改成“data-areacode”,并且直接使用也不行,正确用法是:

    $("input:hidden.pick-area").attr("data-areacode")
        S派大星啊0
        2021/4/28 19:21:27
        这个也获取不到code代码,是什么原因?
    回复
    insist 0
    2019/8/6 11:11:34
    怎么用ajax动态获取数据? 回复
    Just Believe 0
    2019/5/20 10:42:25
    这个可以实现搜索功能吗 回复
    0
    2019/5/15 14:30:39
    谁能分享下?1452125333@qq.com 谢谢 回复
    Baymax 0
    2019/2/12 10:45:57
    怎么样重新实例化,把之前的替换掉?或者把实例化的显示的数据内容替换一下 回复
    ?enc?ounter 0
    2019/1/4 10:43:47
    建议把area给暴露出来,可以自己赋数据
        ?enc?ounter0
        2019/1/4 10:46:45
        不然的话,项目中想要更新地区数据的话,还要前后端一起改
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复