Fill multiple input fields after select an option from a dropdown menu-CodePudding

I would like to create a dropdown menu with several options and when one selects an option, several input fields should be executed by it. Unfortunately I can't get the result I want. Can anyone help me with this? If possible with VanillaJS.

Thanks :)

<form>
    <select id="choice" name = "dropdown">
       <option id="AAPL">Apple</option>
       <option id="NKE">Nike</option>
       <option id="MCD">McDonalds</option>
    </select>
 </form>




var mydropdown = document.getElementById('choice');

mydropdown.onchange = function(){
     document.getElementById("Revenue1").value = 100
     document.getElementById("Revenue2").value = 100
     document.getElementById("Revenue3").value = 100
     document.getElementById("Revenue4").value = 100
     document.getElementById("Revenue5").value = 100


}

CodePudding user response：

mydropdown.onchange = function(){
    switch(this.value){
    case"Apple":
        document.getElementById("Revenue1").value = 100;
        document.getElementById("Revenue2").value = 100;
        document.getElementById("Revenue3").value = 100;
        document.getElementById("Revenue4").value = 100;
        document.getElementById("Revenue5").value = 100;
        break;
        case"Nike":
        document.getElementById("Revenue1").value = 200;
        document.getElementById("Revenue2").value = 200;
        document.getElementById("Revenue3").value = 200;
        document.getElementById("Revenue4").value = 200;
        document.getElementById("Revenue5").value = 200;
        break;
    case"McDonalds":
        document.getElementById("Revenue1").value = 400;
        document.getElementById("Revenue2").value = 500;
        document.getElementById("Revenue3").value = 400;
        document.getElementById("Revenue4").value = 400;
        document.getElementById("Revenue5").value = 400;
        break;
    default:
        document.getElementById("Revenue1").value = 4000;
        document.getElementById("Revenue2").value = 5000;
        document.getElementById("Revenue3").value = 4000;
        document.getElementById("Revenue4").value = 4000;
        document.getElementById("Revenue5").value = 4000;
        break;
  }
}