如何基于下拉选项校验多字段并修改对应输入框数值

实现方案 #

只需要修改2处代码即可满足需求：

1. 改造checkGas函数，解除对事件对象的依赖 #

原函数逻辑依赖触发事件的元素值，改为直接主动读取校验字段的值，不需要传参也不需要绑定特定触发源：

function checkGas(){
  const checkValue = document.getElementById("check").value;
  if (checkValue == "G2"){
    document.getElementById("change").value = "7.4m3/h"
  } 
  // 可按需补充else逻辑，比如校验不通过时清空对应输入框
  // else {
  //   document.getElementById("change").value = ""
  // }
}

2. 在下拉切换的selectModel函数末尾调用checkGas #

每次下拉选项切换完成后自动执行校验赋值逻辑：

function selectModel(e) {
  if (e.target.value == 1){
    document.getElementById("text1").value = "4 bars"
    document.getElementById("text2").value = "4 bar"
  }
  else if (e.target.value == 2){
    document.getElementById("text1").value = "6 bars"
    document.getElementById("text2").value = "6 bar"
  }
  // 新增：下拉切换完成后自动执行校验
  checkGas()
}

可选优化 #

如果需要页面初始化加载时就自动执行一次校验和赋值，可在JS代码末尾增加一行checkGas()。

补充说明：原check输入框绑定的onblur="checkGas(event)"可以保留也可以删除，保留的话还能同时支持失焦触发校验的功能，不需要的话直接删除对应属性即可。

内容的提问来源于stack exchange，提问作者KCYrgn