Vue城市选择器示例（省市区三级）

Vue城市选择器（省市区）

读者可以参考下面的省市区三级联动代码思路，切记要仔细研究透彻，学习交流才是我们的本意，而非一成不变。切记切记！
最近又重读苏子的词，颇为感慨，愿与诸君共享一名篇
缺月挂疏桐，漏断人初静。时见幽人独往来，缥缈孤鸿影。惊起却回头，有恨无人省。拣尽寒枝不肯栖，寂寞沙洲冷。

参考代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市选择器title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.10/vue.js">script>
head>
<body>
<div id="app">
    <select v-model="selectedProvince" @change="onProvinceChange">
        <option value="">请选择省份option>
        <option v-for="province in provinces" :value="province">{{ province }}option>
    select>
    <select v-model="selectedCity" @change="onCityChange">
        <option value="">请选择城市option>
        <option v-for="city in cities" :value="city">{{ city }}option>
    select>
    <select v-model="selectedDistrict">
        <option value="">请选择区县option>
        <option v-for="district in districts" :value="district">{{ district }}option>
    select>
div>
<script>
    new Vue({
        el: '#app',
        data: {
            selectedProvince: '',
            selectedCity: '',
            selectedDistrict: '',
            provinces: ['北京', '上海', '广东'],  // 假设这是省份数据
            cities: [],  // 根据所选省份动态加载的城市数据
            districts: []  // 根据所选城市动态加载的区县数据
        },
        methods: {
            onProvinceChange() {
                // 根据所选省份加载城市数据
                // 这里使用假数据，实际开发中可以通过接口获取数据
                if (this.selectedProvince === '北京') {
                    this.cities = ['东城区', '西城区', '朝阳区'];
                } else if (this.selectedProvince === '上海') {
                    this.cities = ['黄浦区', '徐汇区', '长宁区'];
                } else if (this.selectedProvince === '广东') {
                    this.cities = ['广州市', '深圳市', '珠海市'];
                } else {
                    this.cities = [];
                }

                this.selectedCity = '';  // 清空城市选择
                this.selectedDistrict = '';  // 清空区县选择
            },
            onCityChange() {
                // 根据所选城市加载区县数据
                // 这里使用假数据，实际开发中可以通过接口获取数据
                if (this.selectedCity === '东城区') {
                    this.districts = ['东华门街道', '景山街道', '交道口街道'];
                } else if (this.selectedCity === '西城区') {
                    this.districts = ['西长安街街道', '新街口街道', '月坛北街道'];
                } else if (this.selectedCity === '朝阳区') {
                    this.districts = ['朝外街道', '建外街道', '劲松街道'];
                } else if (this.selectedCity === '黄浦区') {
                    this.districts = ['外滩街道', '蓬莱公园街道', '南京东路街道'];
                } else if (this.selectedCity === '徐汇区') {
                    this.districts = ['康健新村街道', '徐家汇街道', '湖南路街道'];
                } else if (this.selectedCity === '长宁区') {
                    this.districts = ['新华路街道', '虹桥街道', '周家桥街道'];
                } else if (this.selectedCity === '广州市') {
                    this.districts = ['越秀区', '海珠区', '天河区'];
                } else if (this.selectedCity === '深圳市') {
                    this.districts = ['罗湖区', '福田区', '南山区'];
                } else if (this.selectedCity === '珠海市') {
                    this.districts = ['香洲区', '金湾区', '斗门区'];
                } else {
                    this.districts = [];
                }

                this.selectedDistrict = '';  // 清空区县选择
            }
        }
    });
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

运行效果

可以根据自己的需求添加一些新的显示
在这里插入图片描述

相关阅读:
一文了解Spring框架
 因果发现方法概述
 自动检测系统的基本原理
 Vue 3是一个错误，我们不应该再犯。
600+ 道 Java面试题及答案整理(2022最新版)
doris手动添加分区自动消失的问题
 删数字问题贪心算法 1472
【华为OD机试|01】最远足迹（Java/C/Py/JS）
Upwork 新手使用指南——如何快速在Upwork上接单
 Shiro安全（二）：Shiro-550内存马注入
原文地址：https://blog.csdn.net/m0_67587248/article/details/133344647