JavaScript: Three dropdowns, one onchange(). One dropdown change, change another dropdown

Question

I think this should be simple, but look like not so.

Background: I have an ASP.NET MVC project (dot net version 4.6.1). I have a selection on screen for 'Type'. Different type have different charge (and in different currency). (The two currencies selection must be the same.)

<select name="Type" class="form-control" id="Type" style="cursor: auto;" onchange="ChangeCharges()">
    <option selected="selected" value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select> 

<select name="Currency" class="form-control" id="Currency" style="width: auto; cursor: auto;" onchange="ChangeCharges()">
    <option selected="selected" value="GBP">GBP</option>
    <option value="USD">USD</option>
</select>
<input name="ServiceCharge" class="form-control text-box single-line" id="serviceCharge" type="text" value="20.00" data-val="true">

<select name="ContractorCurrency" class="form-control" id="ContractorCurrency" style="width: auto; cursor: auto;" onchange="ChangeCharges()">
    <option selected="selected" value="GBP">GBP</option>
    <option value="USD">USD</option>
</select>
<input name="ContractorCharge" class="form-control text-box single-line" id="contractorCharge" type="text" value="18.00"  data-val="true">

If the 'Type' is changed, the two currencies box will be set to correct selection and so do the two textboxes. (If A has only USD, "20.00" for Service Charge and "18.00" for Contractor Charge, the two currencies box will be set to "USD" and Service Charge text box set to 20.00 and Contract Charge text box set to 18.00.) User, however, is free to select "GBP" for Type A, and all charges will be set to 0.00.

function ChangeCharges() {
    var allChargesInJson = @Html.Raw(Json.Encode(ViewData["allCharges"]));
    var charges = $.parseJSON(allChargesInJson);

    var typeIdSelected = $('#Type option:selected').val();
    var typeSelectedText = $('#Type option:selected').text();

    var CurrencySelected = $('#Currency option:selected').text();  // 'GBP' or 'USD'
    var ContractorCurrencySelected = $('#ContractorCurrency option:selected').text();

    var allCurrencies = @Html.Raw(ViewData["AllCurrencies"]);

    console.log(allChargesInJson);
    console.log("selected type: " + typeSelectedText);

    var bFound = false;
    for (var i = 0; i < charges.length; ++i) {
        if (charges[i].Id.toString() == typeIdSelected) {
            if (charges[i].searchCurrency == CurrencySelected) {
                bFound = true;
                $('#serviceCharge').val(charges[i].searchCharge.toFixed(2));
                $('#contractorCharge').val(charges[i].contractorCharge.toFixed(2));
            }
        }            
    }
    if (bFound == false) {
        console.log("Finally not found: Set all to zero");
        $('#serviceCharge').val('0.00');
        $('#contractorCharge').text('0.00');
    }
}

So far my logic is right. Just one issue. If user selects a different currency for ServiceCharge or ContractorCharge, how can I make the currency for other currency to be the same?

(So it becomes how to detect the previous value of a dropdown in JavaScript, but three dropdown share the same onchange()!)

(I cannot get this SO Answer to 'Getting value of select (dropdown) before change' to work for me as I have three dropdowns.)

JavaScript: Three dropdowns, one onchange(). One dropdown change, change another dropdown

0 Answers0