这是一款非常实用含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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791