如何检查多个字段并根据下拉选项更改值

Question

我有一个下拉列表和一个输入字段，我想检查输入字段是否等于特定值，例如G2 ，如果下拉列表更改为特定值，例如选项 1，那么我想在另一个输入上显示一个值场地。

我举了一个我现在正在做的例子，它只有在 G2 字段上触发 onblur 时才有效。

   <select name="beModel" id="beModel" onchange="selectModel(event)" 
      onblur="checkGas(event)" >
                <option value="0">Select test</option>
                <option value="1">test 1</option>
                <option value="2">test 2</option>
            </select>
      
      <input name="input1" type="text" id="text1" value="" size="20" 
      maxlength="100">
      
      <input name="input2" type="text" id="text2" value="" size="20" 
      maxlength="100">
      
      <input name="input3" type="text" id="check" 
      onblur="checkGas(event)" value="G2" size="20" maxlength="100" >
      
      <input name="input4" type="text" id="change" value="" size="20" 
      maxlength="100" >

      function checkGas(e){
         if (e.target.value == "G2"){
    
         document.getElementById("change").value = "7.4m3/h"

        } 
      }

    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"
    
        }
    }

https://jsfiddle.net/rwvnc7y3/9/

我想要的是在更改下拉选项时触发此效果，而不是在 G2 字段上触发 onblur，是否有简单的解决方案？

Answer 1

我希望这就是您的要求，请检查以下代码：

 function selectModel(e) { if(document.getElementById("check").value=="G2"){ 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" } document.getElementById("change").value = "7.4m3/h" } }

 <select name="beModel" id="beModel" onchange="selectModel(event)" > <option value="0">Select test</option> <option value="1">test 1</option> <option value="2">test 2</option> </select> <input name="input1" type="text" id="text1" value="" size="20" maxlength="100"> <input name="input2" type="text" id="text2" value="" size="20" maxlength="100"> <input name="input3" type="text" id="check" onblur="checkGas(event)" value="G2" size="20" maxlength="100" > <input name="input4" type="text" id="change" value="" size="20" maxlength="100" >