【JS】select 重复选中，无法触发change事件解决办法 -vue篇

Z时代
2024-01-10
分类：技术分享

如图：如果我们选中bb2后，想要再次点击，就会发现无法触发change事件，
【JS】select 重复选中，无法触发change事件解决办法 -vue篇

问题

目前发现，只有改变了e.target.value才能重新触发change,但是如果把e.target.value不能是选项外的value，这样会使选择框变空白，

解决办法

这里就需要一个额外的option来接受选中的e.target.value，
同时内容也要改变成选中的内容

所以我们设置了一个默认值，
因为默认值只有在未使用select的时候才有用，select一旦改变就不需要默认值了

 <option
:value="999"
selected:disabled
style="display:none">{{selectedValue}}</option>

在每次选择后，把选择的e.target.value变成默认值的value,
只要默认值改成一个变量，把它赋值成选中项的内容，每次选中（展示）的其实是默认值这个选项，这样就不会影响change的触发机制

selected(e) {
const obj = this.arr.find(item => {
return item.id === +e.target.value
})
this.selectedValue = obj.name
e.target.value = 999},

完整代码

<template>
<div>
<select @change="selected($event)">
<option
:value="999"
selected:disabled
style="display:none"
>{{selectedValue}}</option>
<option
v-for="item in arr"
:key="item.id"
:value="item.id"
>{{item.name}}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{ id: 1, name: 'aa1' },
{ id: 2, name: 'bb2' },
{ id: 3, name: 'cc3' },
{ id: 4, name: 'dd4' },
],
selectedValue: "默认"
}
},
methods: {
selected(e) {
console.log(e.target.value)
const obj = this.arr.find(item => {
return item.id === +e.target.value
})
console.log(obj)
this.selectedValue = obj.name
e.target.value = 999
},
}
}
</script>