vue3操作select的option下拉框选择省份、城市

1、下载城市对应的代码的插件

npm install province-city-china --save-dev

2、获取城市对应的代码数据

const { data, province, city, area, town } = require('province-city-china/data');

其中province是省份，city是城市

3、下拉框使用select标签的option

把province和 city上的省份和城市遍历到下拉框上，因为获取的city是所有的城市，不是该省份对应的城市，所以需要过滤掉不是该省份的城市

 省份：<select
              @change="proviceChange($event)"
              v-model="data.form.province"
            >
              <option
                v-for="(item, index) in province"
                :key="index"
                :value="item.code"
              >
                {{ item.name }}
              </option>
            </select>
            城市：<select
              v-model="data.form.city"
              @change="cityChange($event)"
            >
              <option
                v-for="(item, index) in data.cities"
                :key="index"
                :value="item.code"
              >
                {{ item.name }}
              </option>
            </select>

let data = reactive({
   form:{
      province: "440000",
      city: "440100",
   },
   cities:[]
})

 

option的value对应省份和城市的code，使用 v-model的值与option的value匹配，使对应option被选中

因为获取到的 city 包括的所有的城市，想要获取相应省份对应的城市，使用forEach对city遍历获取即可，或者使用过滤器。

4、获取省份对应的城市

data.cities = []
city.forEach((v) => {
      if(v.province == data.form.province.slice(0, 2))
      data.cities.push(v)
});
  

此时可以把省份、城市对应的下拉框显示出来