Search code examples
javascriptfunctionif-statementonchangeaddeventlistener

How to call a function when two separate HTML select options are chosen?

Can you please help me find a way to call a function when two separate select options are selected by the user? Please provide an answer using only Javascript. I am really struggling to get my head around this as I have only recently started learning. I want to show different results based on combinations of the two selects. 

    <body>
  <header><div class="Heading"><h1>Shipper Calculator</h1></div><hr></header>
      <select id="Courier">
        <option disabled="disabled" selected="selected">Courier</option>
        <option id="Marken">Marken</option>
        <option id="WorldCourier">World Courier</option>
        <option id="Quickstat">Quickstat</option>
        <option id="DHL">DHL</option>
      </select>
    <select id="Temperature">
      <option disabled="disabled" selected="selected">Temperature</option>
      <option id="ControlledAmbient_Refrigerated">15-25ºC / 2-8ºC</option>
      <option id="ControlleFrozen">-25ºC to -15º</option>
      <option id="DryIce">Dry Ice</option>
      <option id="Ambient">Ambient</option>
    </select>

The below is all I have for the Javscript so far. This works to show the alert when a certain option is selected but they do not work together. What I ideally want to say is for example.... if "Marken" and "Dry Ice" is selected then run a specific function. 

document.getElementById("Courier").addEventListener("change", myFunction);
function myFunction() {
 var x = document.getElementById("Courier").selectedIndex;
 if (x == "3")
 alert("hey");
}

document.getElementById("Temperature").addEventListener("change", myFunction);
function myFunction() {
 var x = document.getElementById("Temperature").selectedIndex;
 if (x == "3")
 alert("hey");
}
Solution

  • try this

    https://jsfiddle.net/470dxe2b/

     <header><div class="Heading"><h1>Shipper Calculator</h1></div><hr></header>
      <select id="Courier">
        <option disabled="disabled" selected="selected">Courier</option>
        <option value="Marken">Marken</option>
        <option value="WorldCourier">World Courier</option>
        <option value="Quickstat">Quickstat</option>
        <option value="DHL">DHL</option>
      </select>
    <select id="Temperature">
      <option disabled="disabled" selected="selected">Temperature</option>
      <option value="ControlledAmbient_Refrigerated">15-25ºC / 2-8ºC</option>
      <option value="ControlleFrozen">-25ºC to -15º</option>
      <option value="DryIce">Dry Ice</option>
      <option value="Ambient">Ambient</option>
    </select>

    Javascript

    let temp = document.getElementById('Temperature');
let cour = document.getElementById('Courier');

temp.addEventListener('change', () => update());
cour.addEventListener('change', () => update());

function update(){
    dropDown1Value = cour.value;
    dropDown2Value = temp.value;

    switch (dropDown1Value + dropDown2Value) {
        case 'MarkenDryIce' :
                MarkenDryIce();
        break;
        default:
                console.log('Nothing to do');
        break;
    }
}

function MarkenDryIce(){
        alert('Marken + Dry Ice Selected');
}