Value of <select> option dependent on selected option of another <select> menu

Question

Recently I started a Javascript course, so I am still figuring out how to do basic things best. My goal is to have 2 select menu's, both with the same currencies and their value, and convert them between eachother.

For example if EUR from menu A is combined EUR from menu B it will be 1 * 1. USD will be 1 * 1.06, and so on but this only allows me to convert from euro to something else.

I tried to figure out if this was possible with a loop. Would that somehow work?

Edit: In the HTML, given by mstephen19, I show the issue of not knowing how to use these 2 dropboxes to convert multiple currencies.

//jquery-3.6.0.min.js

const inputValue = Number(document.getElementById("inputVal").value);

console.log(selectedText);
console.log(selectedText2);

function getResult(){
const selectedText = $('#menuA :selected').text();
const selectedText2 = $('#menuB :selected').text();
let result;
if (selectedText === 'option1' && selectedText2 === 'option1'){
        result = inputValue * 1;
        console.log(result);
    } else if (selectedText === 'option1' && selectedText2 === 'option2'){
        result = inputValue * 0.1;
        console.log(result);
    } else if (selectedText === 'option1' && selectedText2 === 'option3'){
        result = inputValue * 0.01;
        console.log(result);
    } else if (selectedText === 'option2' && selectedText2 === 'option1'){
        result = inputValue * 5;
        console.log(result);
    }
    document.getElementById('resultbox').value = result;
}

<form>
    <input name="number" type="number" />

    <select name="first" id="first">
        <option value="1">EUR</option>
        <option value="1.06">USD</option>
        <option value="1.37">CAD</option>
    </select>

    <select name="second" id="second">
        <option value="1">EUR</option>
        <option value="1.06">USD</option>
        <option value="1.37">CAD</option>
    </select>
</form>

<div id="resultBox"></div>

Answer 1

I'm not sure how you're calculating these multipliers ( 1, 5, 0.5, etc. ), but I think you should use data-attributes/value attributes and calculate your multiplier using those rather than doing a bunch of if...else statements.

 const form = document.querySelector('form'); const resultBox = document.querySelector('div#resultBox'); const handleChange = () => { // Grab the data from the form const data = Object.fromEntries([...new FormData(form)]); // If input number is NaN, just do nothing if (isNaN(+data.number)) return; // Calculate what the multiplier should be const multiplier = +data.first * +data.second; // Calculate the result const result = data.number * multiplier; resultBox.textContent = result.toFixed(2); }; // Run the function every time the form is changed, // or the input changes form.addEventListener('change', handleChange); form.addEventListener('keyup', handleChange);

 <form> <input name="number" type="number" /> <select name="first" id="first"> <option value="1">Option One</option> <option value="5">Option Two</option> <option value="10">Option Three</option> </select> <select name="second" id="second"> <option value="1">Option One</option> <option value="0.1">Option Two</option> <option value="0.01">Option Three</option> </select> </form> <div id="resultBox"></div>