select 下拉框 绑定onchange事件未改变
实现:下拉选择,类型改变对应显示或者隐藏一些标签,绑定onchange事件后,发现有时候需要点击多次,下拉选项才改变,有时候绑定值未改变,导致提交错误;
<select v-model="type" οnchange="hideLabel(value)">
<option value="1">类型1</option>
<option value="2">类型2</option>
<option value="3">类型3</option>
<option value="4">类型4</option>
</select>
function hideLabel(value) {
if (value == '1' || value == '2') {
vm.amountTitle = "金额";
// 当type为1 、2,隐藏标签
$("#form-maxAmount").hide();
vm.maxAmount = 0.00;
} else {
// 当类型为3 、4是表示最小金额,form-maxAmout 展示
vm.amountTitle = "最小金额";
$("#form-maxAmount").show();
}
if (value == '2' || value == '4') {
$("#form-thAmount").show();
} else {
$("#form-thAmount").hide()
vm.thAmount = 0.00;
}
}
解决: 将onchnage事件改为onclick点击事件;
<select v-model="type" οnclick="hideLabel(value)">
<option value="1">类型1</option>
<option value="2">类型2</option>
<option value="3">类型3</option>
<option value="4">类型4</option>
</select>
2、js原生change事件
$("#hideChange").change(function (){
hideLabel(vm.type);
alert(this.value());
});
原因:网上查询说 onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发