JSFiddle - React, Tailwind, and code Playground

by toby3105

HTML

<div id="container">
    <select multiple>
        <option value="1">Volvo</option>
        <option value="2">Saab</option>
        <option value="3">Opel</option>
        <option value="4">Audi</option>
    </select>
    <select multiple>
        <option value="1">Volvo</option>
        <option value="2">Saab</option>
        <option value="3">Opel</option>
        <option value="4">Audi</option>
    </select>
    <select multiple>
        <option value="1">Volvo</option>
        <option value="2">Saab</option>
        <option value="3">Opel</option>
        <option value="4">Audi</option>
    </select>
</div>
<div id="total"></div>

JavaScript

var selects = document.querySelectorAll("select");
var display = document.getElementById("total")
for(var i = 0;i<selects.length;i++){
	selects[i].addEventListener("change",changeHandler);
}

function changeHandler(event){
	display.innerHTML = caculateSelectedValues();
    console.log(event);
}

function caculateSelectedValues(){
	var sum = 0;
    for(var i = 0;i<selects.length;i++){
    	var select = selects[i];
        if(select.selectedIndex > -1){
            sum += Number(select.options[select.selectedIndex].value);
        }
    }
    return sum
}