vue-city - 城市选择器
vue-region-picker - 选择中国的省份市和地区
地图
vue-amap - 基于Vue 2和高德地图的地图组件
vue-google-maps - 带有双向数据绑定Google地图组件
vue-baidu-map- 基于 Vue 2的百度地图组件库
vue-cmap - Vue China map可视化组件
1.首先写一个js文件，areaLocation.js:
var
provinceArray=
new
Array()
provinceArray=[
{"pname":"江苏",
"country":[
{
"cname":"南京市",
"town":["玄武区","白下区","秦淮区","建邺区","雨花台","江宁区",
"六合区","溧水县","高淳县"]},
{
"cname":"南通市",
"town":["崇川区","港闸区","启东市","如皋市","通州市","海门市","海安县","如东县"]
},
{
"cname":"苏州市",
"town":["金阊区","沧浪区","平江区","虎丘区","吴中区","张家港","昆山市","吴江市","太仓市"]
}
]
},
{"pname":"上海",
"country":[
{
"cname":"上海市",
"town":["徐汇区","普陀区","杨浦区","虹口区","卢湾区","浦东区","黄浦区","长宁区","闸北区","静安区","闵行区","松江区"]
}
]
}
]
function
areaInitialize(){
province.length=1
for(var
i
=
0i<provinceArray.lengthi++){
var
pro
=
provinceArray[i].pname
province.options[province.length]
=
new
Option(pro,pro)
}
}
function
changeCLocation(id,city){
//alert(id)
city.length
=
0
if(id>0){
var
j=id-1
var
i
var
countrys
=
new
Array()
countrys
=
provinceArray[j].country
city.options[0]
=
new
Option('不限','')
for
(i=0i
<
countrys.length
i++){
var
cname
=
countrys[i].cname
city.options[city.length]
=
new
Option(cname,
cname)
}
changeTLocation(id,1,town)
}else
if(id==0){
city.length
=
0
town.length
=
0
city.options[city.length]
=
new
Option('不限','')
town.options[town.length]
=
new
Option('不限','')
}
}
function
changeTLocation(pid,cid,town){
//alert(cid)
var
countrys
=
new
Array()
var
towns
=
new
Array()
town.length
=
0
var
i
countrys
=
provinceArray[pid-1].country
areaId
=
countrys[cid-1].areaId
towns
=
countrys[cid-1].town
city.options[0]
=
new
Option('不限','')
town.options[0]
=
new
Option('不限','')
for
(i=0i
<
towns.length
i++){
var
tname
=
towns[i]
town.options[town.length]
=
new
Option(tname,tname)
}
town.options[0]
=
new
Option('不限','')
}
2.
再写一个html页面：
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN">
<html>
<head>
<script
type="text/javascript"
></script>
<script
type="text/javascript">
window.onload=areaInitialize()
</script>
</head>
<body>
<select
size="1">
<option
value=0
selected>--请选择--</option>
</select>
<select
size="1"
>
<option
value=0
selected>--请选择--</option>
</select>
<select
size=1>
<option
value=0
selected>--请选择--</option>
</select>
</body>
</html>
HTML首先在head中载入jquery库和cityselect插件。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cityselect.js"></script>
接下来，我们在#city中，放置三个select，并且三个select分别设置class属性为：prov、city、dist，分别表示省、市、区（县）三个下拉框。注意如果只想实现省市二级联动，则去掉第三个dist的select即可。
<div id="city">
<select class="prov"></select>
<select class="city" disabled="disabled"></select>
<select class="dist" disabled="disabled"></select>
</div>
jQuery
调用cityselect插件非常简单，直接调用：
$("#city").citySelect()
自定义参数调用，设置默认省市区。自定义参数调用，设置默认省市区。
$("#city").citySelect({
url:"js/city.min.js",
prov:"湖南", //省份
city:"长沙", //城市
dist:"岳麓区", //区县
nodata:"none" //当子集无数据时，隐藏select
})
当然，你还可以扩展，自定义下拉列表选项数据，你可以根据需要设置下拉内容，注意数据格式一定要为JSON格式。
$("#city").citySelect({
url:{"citylist":[
{"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},
{"n":"JAVASCIPT"}]},
{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]},
{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]},
]},
prov:"",
city:"",
dist:"",
nodata:"none"
})
你还可以利用PHP等后台语言将数据库中的数据转换成JSON格式，然后使用url参数指向后台地址也能实现无刷新联动效果。
$("#city").citySelect({
url:"data.php"
})
