JQuery hinzufügen (SUM) Mehrwert aus mehrere Formelement

Question

Hier ist die Form, ich habe ...

<form> 
    <label>Fisrt:</label> 
    <select class="first"> 
    <option value="0">United</option> 
    <option value="1">Indi</option> 
    <option value="2">Kingdom</option> 
    </select> 
    <label>Second:</label> 
    <select class="second"> 
    <option value="0">States</option> 
    <option value="1">orange</option> 
    <option value="2">apple</option> 
    </select> 

    <input type="text" class="form-control trScr" id="temp" name="temp"> 
    <input type="text" class="form-control trScr" id="bc" name="bc"> 

</form> 

<div id="total">Total: </div> 

Wie Sie oben sehen, ich mag den numerischen Wert für den Drop-Down mit dem eingefügten Wert ausgewählt hinzufügen für die Eingabebox. Wie berechne ich und zeige das Ergebnis auf div id = total?

Beispiel ..Wenn ich aus der Dropdown-Liste (0-Wert) und Orange (1-Wert) auswählen, Und wenn ich die erste und zweite Eingabebox (4,2) einfüge! Ich möchte, dass das Ergebnis 0 + 1 + 4 + 2 = 7 ist. Wie berechne ich mit Jquery? wenn nicht Js?

Meine try ... Funktion calculateSum() {

var sum = 0; 
    //iterate through each textboxes and add the values 
    $(".trScr").each(function() { 
     //add only if the value is number 
     if(!isNaN(this.value) && this.value.length!=0) { 
      sum += parseFloat(this.value); 
     console.log(sum); 
     } 
    }); 
    //.toFixed() method will roundoff the final sum to 2 decimal places 
    return sum.toFixed(0); 
    } 

die oben zeigt die Summe der Textbox perfekt, mein eigentliches Problem ist, wie die select kann mit dem obigen Code hinzugefügt werden?

Answer 1

Hier war meine Lösung:

$('#fm').on('input', function(e){ 
    let total = Number($('.first').val()) + 
       Number($('.second').val()) + 
       Number($('#temp').val()) + 
       Number($('#bc').val()); 
    $('#total').text(total); 
}); 

Geige: - https://jsfiddle.net/wr6ympos/3/

Answer 2

Sie ein Formular Taste benötigen, wenn nicht die gesamte berechnet werden soll, basierend auf change Ereignis

// adding event to button 
 
document.getElementById('calculate').addEventListener('click', function() { 
 
    // getting value from the two select 
 
    var getFirstSelectVal = document.getElementsByClassName('first')[0].value; 
 
    var getSecondSelectVal = document.getElementsByClassName('second')[0].value 
 
    // getting value from two input box 
 
    var getTempValue = document.getElementById('temp').value; 
 
    var getBCValue = document.getElementById('bc').value; 
 
    // the + sign before the variable is unary operator to convert value to number 
 
    // + +variableName. The first sign s use to sum 
 
    // using innerHTML to show the value 
 
    document.getElementById('total').innerHTML = +getFirstSelectVal + +getSecondSelectVal + +getTempValue + +getBCValue; 
 
    //console.log(getFirstSelectVal) 
 

 
})

<form> 
 
    <label>Fisrt:</label> 
 
    <select class="first"> 
 
    <option value="0">United</option> 
 
    <option value="1">Indi</option> 
 
    <option value="2">Kingdom</option> 
 
    </select> 
 
    <label>Second:</label> 
 
    <select class="second"> 
 
    <option value="0">States</option> 
 
    <option value="1">orange</option> 
 
    <option value="2">apple</option> 
 
    </select> 
 

 
    <input type="text" class="form-control" id="temp" name="temp"> 
 
    <input type="text" class="form-control" id="bc" name="bc"> 
 
    <input type="button" value="Calculate" id="calculate"> 
 
</form> 
 

 
<div id="total">Total: </div>