I started with this code
function OnChange(value) {
var sum = 0;
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var z = document.getElementById("third").value;
sum = parseInt(x) + parseInt(y) + parseInt(z);
document.getElementById('sum').innerHTML = sum;
}
<select id="first" onchange='OnChange(this.value)'>
<option value="0">Choose...</option>
{% for firstDigit in firstDigits %}
<option value="{{ firstDigit.value }}">
{{ firstDigit.name }}
</option>
{% endfor %}
</select>
<select id="second" onchange='OnChange(this.value)'>
<option value="0">Choose...</option>
{% for secondDigit in secondDigits %}
<option value="{{ secondDigit.value }}">
{{ secondDigit.name }}
</option>
{% endfor %}
</select>
<select id="third" onchange='OnChange(this.value)'>
<option value="0">Choose...</option>
{% for thirdDigit in thirdDigits %}
<option value="{{ thirdDigit.value }}">
{{ thirdDigit.name }}
</option>
{% endfor %}
</select>
and found this How can I use <ul> list instead of <select> dropdown for the languages switcher? for my changes, but I have sum which makes me hard to do. I made for every select option click function.
first.click(function (event){});
second.click(function (event){});
third.click(function (event){});