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
}
}
上一篇: 惠普打印机无法识别USB端口该怎么办?
下一篇: 如何解释硬盘驱动器的型号(希捷)
推荐阅读
-
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法_jquery
-
js获取select默认选中的Option并不是当前选中值_javascript技巧
-
jquery获得select option的值 和对select option的操作
-
使用Java获取html中Select,radio多选的值方法
-
C#正则表达式获取下拉菜单(select)的相关属性值
-
使用Java获取html中Select,radio多选的值方法
-
javascript 动态设置已知select的option的value值的代码
-
js 获取当前select元素值的代码
-
js获取当前select 元素值的代码
-
jquery获取select,option所有的value和text的实例