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

news2024/12/26 3:47:14

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>