ai
/
app-gift


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
							<!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>