如何汇总从多选下拉框中选择的值？

Question

我正在尝试对从多选下拉列表中选择的值进行汇总，并在另一个文本/输入字段中显示总计...。有什么可能的方法吗？

document.getElementById('amt').addEventListener('change', function() {
    var total = 0,
        selected = this.selectedOptions,
        l = selected.length;

    for (var i = 0; i < l; i++) {
        total += parseInt(selected[i].value, 10);
    }

    if (!isNaN(total)) {
        document.getElementById('hidden').value = total;
    }
});

<div class="col-sm-6 col-xs-12 col-md-6 col-lg-6">
   <label for="payment_invoice_id" class="col-sm-5 col-xs-4 col-md-4 col-lg-4 control-label text-left">Invoice No.<sup class="text-red">*</sup> </label>
   <div class="col-sm-7 col-xs-12 col-md-8 col-lg-8" id="invoiceno">
      <select   class="multi-select" multiple='multiple' name="amt[]" id="amt" onChange="document.getElementById('hidden').innerHTML = this.value;">
         <option value=""></option>
         <option value="5">5Rs</option>
         <option value="10">10Rs</option>
         <option value="15">15Rs</option>
      </select>
   </div>
</div>
<div class="col-sm-6 col-xs-12 col-md-6 col-lg-6" >
   <label for="tax_type" class="col-sm-6 col-xs-7 col-md-4 col-lg-4 control-label">Hidden<sup class="text-red">*</sup></label>
   <div class="col-sm-6 col-xs-12 col-md-8 col-lg-8">  
      <input type="text" class="form-control" id="hidden" name="hidden" placeholder="Hidden" autocomplete="off" onChange="sum()" />                                               
   </div>
</div>

感谢您提供的所有解决方案...

<script>
 $('#amt').change(function () {
    var selected = $("#amt option:selected");
    var sum = 0;
    //console.log($(this).val());
     selected.each(function () {
      var tsum = $(this).val(); 
      sum += Number(tsum);
     });
     $('#hidden').val(sum);
    });

</script>