<select v-model='privinceCode' @change="chooseProcive($event)">
  <option :value ="item.code" v-for="(item,index) in proviceList" :key="index">{{item.name}}</option>
</select>
<select v-model='cityCode' @change="chooseCity($event)">
  <option :value ="item.code" v-for="(item,index) in cityList" :key="index">{{item.name}}</option>
</select>

特殊说明一点,想要默认绑定一个值
让select的v-model的值(privinceCode)与option绑定的value值 能匹配到一致的, 就会显示默认的那个值。也就会默认显示到option中的值 {{item.name}}

methods:{
		chooseProcive(e){
				console.log("选择省",e)
				this.provinceCode = e.target.value  //e.target.value的值为当前选中的option的value值。
				var newitem = this.proviceList.filter((item,index,a)=>{  
				 // 数组循环过滤 ,第一个参数为当前项,第二个参数为索引,第三个参数为原值
					if(item.code == this.provinceCode ){  //如果与返回的e.target.value的值一致, 就返回当前项、
						return item
					}
				})
				this.provinceName =newitem[0].name   //从找到的当前项中取所需要的任何值。
				this.cityList = [],       // 选完省,拿到省的code,去调取省对应的市列表
				this.getcityList(this.provinceCode)
			},
			chooseCity(e){ //
				console.log("选择市",e)
				var hh  = this.cityList.filter((c,i,a)=>{
					if(c.code == e.target.value ){
						return c
					}
				})
				this.city = hh[0].name
			}
}
Logo

前往低代码交流专区

更多推荐