这是一款非常实用含7种使用方法的省市区三级联动城市选择器插件，PC电脑端jQuery省市县城市三级联动下拉菜单选择插件代码。支持三种格式：省市区三级联动、省市二级联动或单选省。
查看演示
下载资源：
76
次 下载资源
下载积分：
20
积分
js代码
$(".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"});