JSFiddle - React, Tailwind, and code Playground
HTML
<select multiple>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
<option val="5">5</option>
<option val="6">6</option>
</select>
CSS
select option {
padding:3px 15px;
}
JavaScript
// Underscore.js isArray()
var isArray = Array.isArray || function(obj) {
return toString.call(obj) == '[object Array]';
};
$('select').on('change', function(e) {
var $this = $(this),
values = $this.val(),
summ = 0;
if (isArray(values)) {
for (var i = 0, length = values.length; i < length; i++) {
summ += parseInt(values[i], 10);
}
} else {
summ = values;
}
alert(summ); // <- result
}).triggerHandler('change'); // 'triggerHandler'! Not 'change()' or "trigger('change')"!