- 开发省市联动功能
- 页面有三个下拉框，一个是省份的下拉框，一个是城市下拉框，另一个是地区下拉框。当选择某个省份时，则城市下拉框自动显示该省份对应的城市，选择城市时，则地区下拉框自动显示该城市对应的地区。
- 运用了bootstrap和vue。
- 效果图
<!--复制进项目时记得到相应的包-->
<!DOCTYPE html>
<html>
<head>
<title>二、省市联动功能</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container" id="app">
<form>
<div class="row">
<div class="col">
<label for="province">省份</label>
<!--使用 v-model实现双向数据绑定prov值-->
<select id="province" class="form-control" v-model="prov">
<option v-for="item in arr" :value="item.name">{{item.name}}</option>
</select>
</div>
<div class="col">
<label for="city">城市</label>
<!--使用 v-model 实现双向数据绑定city值-->
<select id="city" class="form-control" v-model="city">
<option v-for="item in cityArr" :value="item.name">{{item.name}}</option>
</select>
</div>
<div class="col">
<label for="district">地区</label>
<!--v使用 v-model 实现双向数据绑定值-->
<select id="district" class="form-control" v-model="district" v-if="district">
<option v-for="item in districtArr" :value="item.name">{{item.name}}</option>
</select>
</div>
</div>
</form>
</div>
<script src="js/vue.min.js"></script>
<script>
var arrAll =
[
{
name: "陕西",
sub: [{name: "请选择", sub: []},
{
name: "西安",
sub: [{name: "请选择"}, {name: "莲湖区"}, {name: "新城区"}, {name: "碑林区"}, {name: "雁塔区"}, {name: "灞桥区"}, {name: "未央区"}, {name: "阎良区"}, {name: "临潼区"}, {name: "长安区"}, {name: "高陵县"}, {name: "蓝田县"}, {name: "户县"}, {name: "周至县"}, {name: "其他"}],
type: 0
},
{
name: "铜川",
sub: [{name: "请选择"}, {name: "耀州区"}, {name: "王益区"}, {name: "印台区"}, {name: "宜君县"}, {name: "其他"}],
type: 0
},
{
name: "宝鸡",
sub: [{name: "请选择"}, {name: "渭滨区"}, {name: "金台区"}, {name: "陈仓区"}, {name: "岐山县"}, {name: "凤翔县"}, {name: "陇县"}, {name: "太白县"}, {name: "麟游县"}, {name: "扶风县"}, {name: "千阳县"}, {name: "眉县"}, {name: "凤县"}, {name: "其他"}],
type: 0
},
{
name: "咸阳",
sub: [{name: "请选择"}, {name: "秦都区"}, {name: "渭城区"}, {name: "杨陵区"}, {name: "兴平市"}, {name: "礼泉县"}, {name: "泾阳县"}, {name: "永寿县"}, {name: "三原县"}, {name: "彬县"}, {name: "旬邑县"}, {name: "长武县"}, {name: "乾县"}, {name: "武功县"}, {name: "淳化县"}, {name: "其他"}],
type: 0
},
{
name: "渭南",
sub: [{name: "请选择"}, {name: "临渭区"}, {name: "韩城市"}, {name: "华阴市"}, {name: "蒲城县"}, {name: "潼关县"}, {name: "白水县"}, {name: "澄城县"}, {name: "华县"}, {name: "合阳县"}, {name: "富平县"}, {name: "大荔县"}, {name: "其他"}],
type: 0
},
{
name: "延安",
sub: [{name: "请选择"}, {name: "宝塔区"}, {name: "安塞县"}, {name: "洛川县"}, {name: "子长县"}, {name: "黄陵县"}, {name: "延川县"}, {name: "富县"}, {name: "延长县"}, {name: "甘泉县"}, {name: "宜川县"}, {name: "志丹县"}, {name: "黄龙县"}, {name: "吴起县"}, {name: "其他"}],
type: 0
},
{
name: "汉中",
sub: [{name: "请选择"}, {name: "汉台区"}, {name: "留坝县"}, {name: "镇巴县"}, {name: "城固县"}, {name: "南郑县"}, {name: "洋县"}, {name: "宁强县"}, {name: "佛坪县"}, {name: "勉县"}, {name: "西乡县"}, {name: "略阳县"}, {name: "其他"}],
type: 0
},
{
name: "榆林",
sub: [{name: "请选择"}, {name: "榆阳区"}, {name: "清涧县"}, {name: "绥德县"}, {name: "神木县"}, {name: "佳县"}, {name: "府谷县"}, {name: "子洲县"}, {name: "靖边县"}, {name: "横山县"}, {name: "米脂县"}, {name: "吴堡县"}, {name: "定边县"}, {name: "其他"}],
type: 0
},
{
name: "安康",
sub: [{name: "请选择"}, {name: "汉滨区"}, {name: "紫阳县"}, {name: "岚皋县"}, {name: "旬阳县"}, {name: "镇坪县"}, {name: "平利县"}, {name: "石泉县"}, {name: "宁陕县"}, {name: "白河县"}, {name: "汉阴县"}, {name: "其他"}],
type: 0
},
{
name: "商洛",
sub: [{name: "请选择"}, {name: "商州区"}, {name: "镇安县"}, {name: "山阳县"}, {name: "洛南县"}, {name: "商南县"}, {name: "丹凤县"}, {name: "柞水县"}, {name: "其他"}],
type: 0
},
{name: "其他"}],
type: 1
},{
name: "四川",
sub: [{name: "请选择", sub: []},
{
name: "成都",
sub: [{name: "请选择"}, {name: "青羊区"}, {name: "锦江区"}, {name: "金牛区"}, {name: "武侯区"}, {name: "成华区"}, {name: "龙泉驿区"}, {name: "青白江区"}, {name: "新都区"}, {name: "温江区"}, {name: "都江堰市"}, {name: "彭州市"}, {name: "邛崃市"}, {name: "崇州市"}, {name: "金堂县"}, {name: "郫县"}, {name: "新津县"}, {name: "双流县"}, {name: "蒲江县"}, {name: "大邑县"}, {name: "其他"}],
type: 0
},
{
name: "自贡",
sub: [{name: "请选择"}, {name: "大安区"}, {name: "自流井区"}, {name: "贡井区"}, {name: "沿滩区"}, {name: "荣县"}, {name: "富顺县"}, {name: "其他"}],
type: 0
},
{
name: "攀枝花",
sub: [{name: "请选择"}, {name: "仁和区"}, {name: "米易县"}, {name: "盐边县"}, {name: "东区"}, {name: "西区"}, {name: "其他"}],
type: 0
},
{
name: "泸州",
sub: [{name: "请选择"}, {name: "江阳区"}, {name: "纳溪区"}, {name: "龙马潭区"}, {name: "泸县"}, {name: "合江县"}, {name: "叙永县"}, {name: "古蔺县"}, {name: "其他"}],
type: 0
},
{
name: "德阳",
sub: [{name: "请选择"}, {name: "旌阳区"}, {name: "广汉市"}, {name: "什邡市"}, {name: "绵竹市"}, {name: "罗江县"}, {name: "中江县"}, {name: "其他"}],
type: 0
},
{
name: "绵阳",
sub: [{name: "请选择"}, {name: "涪城区"}, {name: "游仙区"}, {name: "江油市"}, {name: "盐亭县"}, {name: "三台县"}, {name: "平武县"}, {name: "安县"}, {name: "梓潼县"}, {name: "北川羌族自治县"}, {name: "其他"}],
type: 0
},
{
name: "广元",
sub: [{name: "请选择"}, {name: "元坝区"}, {name: "朝天区"}, {name: "青川县"}, {name: "旺苍县"}, {name: "剑阁县"}, {name: "苍溪县"}, {name: "市中区"}, {name: "其他"}],
type: 0
},
{
name: "遂宁",
sub: [{name: "请选择"}, {name: "船山区"}, {name: "安居区"}, {name: "射洪县"}, {name: "蓬溪县"}, {name: "大英县"}, {name: "其他"}],
type: 0
},
{
name: "内江",
sub: [{name: "请选择"}, {name: "市中区"}, {name: "东兴区"}, {name: "资中县"}, {name: "隆昌县"}, {name: "威远县"}, {name: "其他"}],
type: 0
},
{
name: "乐山",
sub: [{name: "请选择"}, {name: "市中区"}, {name: "五通桥区"}, {name: "沙湾区"}, {name: "金口河区"}, {name: "峨眉山市"}, {name: "夹江县"}, {name: "井研县"}, {name: "犍为县"}, {name: "沐川县"}, {name: "马边彝族自治县"}, {name: "峨边彝族自治县"}, {name: "其他"}],
type: 0
},
{
name: "南充",
sub: [{name: "请选择"}, {name: "顺庆区"}, {name: "高坪区"}, {name: "嘉陵区"}, {name: "阆中市"}, {name: "营山县"}, {name: "蓬安县"}, {name: "仪陇县"}, {name: "南部县"}, {name: "西充县"}, {name: "其他"}],
type: 0
},
{
name: "眉山",
sub: [{name: "请选择"}, {name: "东坡区"}, {name: "仁寿县"}, {name: "彭山县"}, {name: "洪雅县"}, {name: "丹棱县"}, {name: "青神县"}, {name: "其他"}],
type: 0
},
{
name: "宜宾",
sub: [{name: "请选择"}, {name: "翠屏区"}, {name: "宜宾县"}, {name: "兴文县"}, {name: "南溪县"}, {name: "珙县"}, {name: "长宁县"}, {name: "高县"}, {name: "江安县"}, {name: "筠连县"}, {name: "屏山县"}, {name: "其他"}],
type: 0
},
{
name: "广安",
sub: [{name: "请选择"}, {name: "广安区"}, {name: "华蓥市"}, {name: "岳池县"}, {name: "邻水县"}, {name: "武胜县"}, {name: "其他"}],
type: 0
},
{
name: "达州",
sub: [{name: "请选择"}, {name: "通川区"}, {name: "万源市"}, {name: "达县"}, {name: "渠县"}, {name: "宣汉县"}, {name: "开江县"}, {name: "大竹县"}, {name: "其他"}],
type: 0
},
{
name: "雅安",
sub: [{name: "请选择"}, {name: "雨城区"}, {name: "芦山县"}, {name: "石棉县"}, {name: "名山县"}, {name: "天全县"}, {name: "荥经县"}, {name: "宝兴县"}, {name: "汉源县"}, {name: "其他"}],
type: 0
},
{
name: "巴中",
sub: [{name: "请选择"}, {name: "巴州区"}, {name: "南江县"}, {name: "平昌县"}, {name: "通江县"}, {name: "其他"}],
type: 0
},
{
name: "资阳",
sub: [{name: "请选择"}, {name: "雁江区"}, {name: "简阳市"}, {name: "安岳县"}, {name: "乐至县"}, {name: "其他"}],
type: 0
},
{
name: "阿坝藏族羌族自治州",
sub: [{name: "请选择"}, {name: "马尔康县"}, {name: "九寨沟县"}, {name: "红原县"}, {name: "汶川县"}, {name: "阿坝县"}, {name: "理县"}, {name: "若尔盖县"}, {name: "小金县"}, {name: "黑水县"}, {name: "金川县"}, {name: "松潘县"}, {name: "壤塘县"}, {name: "茂县"}, {name: "其他"}],
type: 0
},
{
name: "甘孜藏族自治州",
sub: [{name: "请选择"}, {name: "康定县"}, {name: "丹巴县"}, {name: "炉霍县"}, {name: "九龙县"}, {name: "甘孜县"}, {name: "雅江县"}, {name: "新龙县"}, {name: "道孚县"}, {name: "白玉县"}, {name: "理塘县"}, {name: "德格县"}, {name: "乡城县"}, {name: "石渠县"}, {name: "稻城县"}, {name: "色达县"}, {name: "巴塘县"}, {name: "泸定县"}, {name: "得荣县"}, {name: "其他"}],
type: 0
},
{
name: "凉山彝族自治州",
sub: [{name: "请选择"}, {name: "西昌市"}, {name: "美姑县"}, {name: "昭觉县"}, {name: "金阳县"}, {name: "甘洛县"}, {name: "布拖县"}, {name: "雷波县"}, {name: "普格县"}, {name: "宁南县"}, {name: "喜德县"}, {name: "会东县"}, {name: "越西县"}, {name: "会理县"}, {name: "盐源县"}, {name: "德昌县"}, {name: "冕宁县"}, {name: "木里藏族自治县"}, {name: "其他"}],
type: 0
},
{name: "其他"}],
type: 1
},
]
var vm = new Vue({
el: '#app',
data: {
//存储省市区的数组
arr: arrAll,
//双向绑定的省份
prov: '',
//双向绑定的城市
city: '',
//双向绑定的地区
district: '',
//城市数组
cityArr: [],
//地区数组
districtArr: []
},
methods: {
//填充城市
updateCity: function () {
for (var i in this.arr) {
var obj = this.arr[i];
//获得选择省份的下级城市，存储在cityArr中
if (obj.name == this.prov) {
this.cityArr = obj.sub;
break;
}
}
//城市默认为城市数组第一个城市
this.city = this.cityArr[1].name;
},
//填充地区
updateDistrict: function () {
for (var i in this.cityArr) {
var obj = this.cityArr[i];
//获得选择城市的下级地区，存储在districeArr
if (obj.name == this.city) {
this.districtArr = obj.sub;
break;
}
}
//如果地区存在，则默认为地区数组的第一个地区
if(this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) {
this.district = this.districtArr[1].name;
} else {
this.district = '';
}
}
},
beforeMount: function () {//渲染完成之后的回调函数（钩子函数）
this.updateCity();
this.updateDistrict();
},
//通过 watch 来响应数据的变化
watch: {
prov: function () {
this.updateCity();
this.updateDistrict();
},
city: function () {
this.updateDistrict();
}
}
})
</script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
