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

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

添加时间:2021-03-13 21:27:32
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:城市选择
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

这是一款非常实用含7种使用方法的省市区三级联动城市选择器插件,PC电脑端jQuery省市县城市三级联动下拉菜单选择插件代码。支持三种格式:省市区三级联动、省市二级联动或单选省。
含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>
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:含7种使用方法的省市区三级联动城市选择器插件

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.084729s