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

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

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

How to check multiple fields and change value based on drop down option

html

javascript

input

onchange

drop-down-menu