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

这是一款非常实用含7种使用方法的省市区三级联动城市选择器插件,PC电脑端jQuery省市县城市三级联动下拉菜单选择插件代码。支持三种格式:省市区三级联动、省市二级联动或单选省。

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>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录