含7种使用方法的省市区三级联动城市选择器插件

js代码

<script type="text/javascript" src="js/pick-pcc.min.1.0.1.js"></script>
<script type="text/javascript">

    $(".pick-area1").pickArea();

    $(".pick-area2").pickArea({
        "format":"北京市/市辖区", //格式
        "width":"300",
        "borderColor":"#7b68ee",//文本边框的色值
        "arrowColor":"#7b68ee",//箭头颜色
        "listBdColor":"#7b68ee",//下拉框父元素ul的border色值
        "color":"#7b68ee",//字体颜色
        "fontSize":"16px",//字体大小
        "hoverColor":"#7b68ee",
        "paddingLeft":"10px",
        "arrowRight":"10px",
        //"preSet":"北京市/市辖区/东城区",
        "getVal":function(){
            //console.log($(".pick-area-hidden").val())
            //console.log($(".pick-area-dom").val())
            var thisdom = $("."+$(".pick-area-dom").val());
            thisdom.next().val($(".pick-area-hidden").val());
        }
    });

    $(".pick-area3").pickArea({
        "format":"江苏省", //格式
        "width":"400",
        "borderColor":"#51AFC9",//文本边框的色值
        "arrowColor":"#51AFC9",//箭头颜色
        "listBdColor":"#51AFC9",//下拉框父元素ul的border色值
        "color":"#51AFC9",//字体颜色
        "fontSize":"16px",//字体大小
        "hoverColor":"#51AFC9",
        "paddingLeft":"10px",
        "arrowRight":"10px",
        "maxHeight":"600",
        //"preSet":"河南省/郑州市",
        "getVal":function(){
            //console.log($(".pick-area-hidden").val())
            //console.log($(".pick-area-dom").val())
            var thisdom = $("."+$(".pick-area-dom").val());
            thisdom.next().val($(".pick-area-hidden").val());
        }
    });
    $(".pick-area4").pickArea({
        "format":"province/city/county", //格式
        "width":"420",//设置“省市县”文本边框的宽度
        "height":"48",//设置“省市县”文本边框的高度
        "borderColor":"#435abd",//设置“省市县”文本边框的色值
        "arrowColor":"#435abd",//设置下拉箭头颜色
        "listBdColor":"#435abd",//设置下拉框父元素ul的border色值
        "color":"#435abd",//设置“省市县”字体颜色
        "fontSize":"20px",//设置字体大小
        "hoverColor":"#435abd",
        "paddingLeft":"30px",//设置“省”位置处的span相较于边框的距离
        "arrowRight":"30px",//设置下拉箭头距离边框右侧的距离
        "maxHeight":"300px",
        //"preSet":"",//数据初始化 ；这里的数据初始化有两种方式，第一种是用preSet属性设置，第二种是在a标签里使用name属性设置
        "getVal":function(){//这个方法是每次选中一个省、市或者县之后，执行的方法
            //console.log($(".pick-area-hidden").val())
            //console.log($(".pick-area-dom").val())
            var thisdom = $("."+$(".pick-area-dom").val());//返回的是调用这个插件的元素pick-area，$(".pick-area-dom").val()的值是该元素的另一个class名，这个class名在dom结构中是唯一的，不会有重复，可以通过这个class名来识别这个pick-area
            thisdom.next().val($(".pick-area-hidden").val());//$(".pick-area-hidden").val()是页面中隐藏域的值，存放着每次选中一个省、市或者县的时候，当前文本存放的省市县的最新值，每点击一次下拉框里的li，这个值就会立即更新
        }
    });
    $(".pick-area5").pickArea({
        "format":"province/city", //格式
        "width":"300",
        "borderColor":"#e02222",//文本边框的色值
        "arrowColor":"#e02222",//下拉箭头颜色
        "listBdColor":"#e02222",//下拉框父元素ul的border色值
        "color":"#e02222",//字体颜色
        "hoverColor":"#e02222",
        //"preSet":"山东省/临沂市/兰陵县",
        "getVal":function(){
            //console.log($(".pick-area-hidden").val())
            //console.log($(".pick-area-dom").val())
            var thisdom = $("."+$(".pick-area-dom").val());
            thisdom.next().val($(".pick-area-hidden").val());
        }
    });

    $(".pick-area6").pickArea({
        "format":"上海市/市辖区/普陀区", //格式
        "width":"340",
        "borderColor":"#ff8c00",//文本边框的色值
        "arrowColor":"#ff8c00",//下拉箭头颜色
        "listBdColor":"#ff8c00",//下拉框父元素ul的border色值
        "color":"#ff8c00",//字体颜色
        "hoverColor":"#ff8c00",
        //"preSet":"山东省/临沂市/兰陵县",
        "getVal":function(){
            //console.log($(".pick-area-hidden").val())
            //console.log($(".pick-area-dom").val())
            var thisdom = $("."+$(".pick-area-dom").val());
            thisdom.next().val($(".pick-area-hidden").val());
        }
    });

    $(".pick-area7").pickArea({"format":"","width":"150px","borderColor":"#7894D4","color":'#7894D4',"arrowColor":"#7894D4"});

</script>