JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<select type="text" name="eins">
    <option value="170">170</option>
    <option value="180">180</option>
    <option value="190">190</option>
</select>

<select type="text" name="zwei">
    <option value="170">170</option>
    <option value="180">180</option>
    <option value="190">190</option>
</select>

<select type="text" name="drei">
    <option value="170">170</option>
    <option value="180">180</option>
    <option value="190">190</option>
</select>

<div id="resultat"></div>

JavaScript

function LiveResult(){
    var sum = 0; // festlegen auf 0
    $("select").each(function(){ // suche jedes Select auf der Seite
        sum += parseInt($(this).val()); // addiere die auswahl des Select zu "sum" (parse int sorgt dafür das die Zahl auch als Zahl benutzt wird und nicht als String)
    });
    $("#resultat").html(sum); // schreibe das Ergebnis in den HTML Container mit der ID resultat
}

LiveResult(); // um die default werte direkt, addiert, anzuzeigen

$("select").on("change",function(){
    LiveResult(); // bei einer änderung (change) der Selects wird die Funktion aufgerufen
});