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

Question

I have a dropdown list and an input field, I want to check if the input field equals to a specific value e.g. G2 and if the drop-down is changed to a specific value e.g. option 1 then I want to show a value on another input field.

I made an example of what I am currently doing now which only works if onblur is triggered on G2 field.

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

What I want is to trigger this effect while changing the drop-down option instead of triggering onblur on G2 field, is there a simple solution for this?

Answer 1

I hope this is what you are asking, please check the code below:

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