使用方法1

 最简单的的使用方法

使用方法2

使用方法3

使用方法4

使用方法5

使用方法6

使用方法7

pc端省市区三级联动插件使用说明:

功能概要:
    (1)数据初始化:提供两种数据初始化的方式
    (2)样式友好化:样式可修改
    (3)事件回调
    (4)数据支持三种格式:“省/市/县”、“省/市”、“省
    (5)很新的省市县json数据

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触发执行一次之后,当前插件的最新值。

    图3-1:
    
    图3-2:
    
    图3-3:
    
    图3-4:
    
    图3-5:
    
2.那么什么时候会触发事件回调函数呢?就是当你选中数据的下拉列表中的某一个li,即选中某一个值时,就会触发该回调函数,在这里你可以获取当前这个插件最新选中的省市县的数据。(也就是上面说的那两个隐藏域的值)

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">的唯一的类名。
     图6-1: