欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 获取select选中的option的所有值

程序员文章站 2022-04-05 18:58:24
...
<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
			}
}