|
|
@@ -0,0 +1,66 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <title>城市选择</title>
|
|
|
+ <style>
|
|
|
+ .select-container {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <div class="select-container">
|
|
|
+ <select v-model="selectedProvince" @change="onProvinceChange">
|
|
|
+ <option value="">请选择省份</option>
|
|
|
+ <option v-for="province in provinces" :value="province">{{ province }}</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="select-container">
|
|
|
+ <select v-model="selectedCity" @change="onCityChange">
|
|
|
+ <option value="">请选择城市</option>
|
|
|
+ <option v-for="city in cities" :value="city">{{ city }}</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="select-container">
|
|
|
+ <select v-model="selectedDistrict">
|
|
|
+ <option value="">请选择区域</option>
|
|
|
+ <option v-for="district in districts" :value="district">{{ district }}</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
|
|
|
+ <script>
|
|
|
+ new Vue({
|
|
|
+ el: '#app',
|
|
|
+ data: {
|
|
|
+ provinces: ['江西省', '浙江省', '江苏省'],
|
|
|
+ cities: {
|
|
|
+ '江西省': '南昌市',
|
|
|
+ '浙江省': '杭州市',
|
|
|
+ '江苏市': '南京市'
|
|
|
+ },
|
|
|
+ districts: {
|
|
|
+ '南昌市': ['东湖区', '西湖区', '青山湖区'],
|
|
|
+ '上海市': ['黄浦区', '徐汇区', '静安区'],
|
|
|
+ '北京市': ['东城区', '西城区', '朝阳区']
|
|
|
+ },
|
|
|
+ selectedProvince: '',
|
|
|
+ selectedCity: '',
|
|
|
+ selectedDistrict: ''
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onProvinceChange() {
|
|
|
+ this.selectedCity = '';
|
|
|
+ this.selectedDistrict = '';
|
|
|
+ },
|
|
|
+ onCityChange() {
|
|
|
+ this.selectedDistrict = '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
