使用javascript计算所选选项的总值

我试图计算下面的多个组合框的selected选项的值

<form method="post" name="transaksi" action="proc.php">

<select name="bulan_catering[]" id="id_cur_month_catering" size="12" multiple="multiple" onchange="update_catering()">
<option value="jul-20132014-3500">[2013-2014] July</option>
<option value="aug-20132014-3700">[2013-2014] August </option>
<option value="sep-20132014-4100">[2013-2014] September </option>
<option value="oct-20132014-4200">[2013-2014] October </option>
<option value="nov-20132014-4800">[2013-2014] November </option>
<option value="dec-20132014-5100">[2013-2014] December </option>
</select>
Total payment: <input type="text" name="catering">

我使用这个简单的javascript来获取值

<script type="text/javascript" language="javascript">
function update_catering() {
   var num_month_catering = document.getElementBy("id_cur_month_catering").value;
   var cur_payment_catering = num_month_catering.substring(13);
   document.transaksi.catering.value = cur_payment_catering;
}
</script>

我需要做的是，例如，如果用户选择七月、八月和九月，它应该计数3500+3700+4100。总付款的结果应为11300。但它不能像我想的那样工作。它仅显示最后选定选项的值。在本例中，它显示4100最后一个值。有人能帮我用javascript做我上面解释过的正确的事情吗

---

谢谢。

最酷的事情是jQuery方法为具有多个属性的选择框返回一个值数组，因此，只需遍历该数组，并使用和regex收集价格，然后使用计算值之和

但是，我不确定jQuery是否与这个问题相关

---

这是一个相当基本的解决方案。在发布StackOverflow问题之前，您应该进行研究。但这是你的解决方案

var intNumber = 0;
var arrListOptions = document.getElementById('id_cur_month_catering').options;
for(intIterator = 0; intIterator < arrListOptions.length; intIterator ++){
    if (arrListOptions[intIterator].selected == true){
       intNumber += parseInt(arrListOptions[intIterator].value.split('-')[2]);
    }
}

intNumber将包含列表中选定的每个数字的总和

以下是链接列表，您可以通过这些链接了解此短脚本的javascript基础：

此外，这里还有一个类似问题的例子，你可以从中得到启发：

我还建议您学习jQuery，因为这将允许您访问更多的编码功能，这些功能现在比较常见，比如php中的foreach，jQuery中的每个都是。 这将帮助您在以后进行开发时做好更多准备

---

我希望这会有所帮助：-

我个人建议：

餐饮功能更新{ //获取所有选项，并将它们从节点列表转换为数组， //在该数组上迭代以仅保留选定的数组： var selectedOptions=[].slice.callthis.options，0.filterfunctionopt{ 返回opt.selected； }, //迭代selectedOptions数组以形成值的映射： 值=selectedOptions.mapfunctionopt{ //从选项元素的值中保留最后的数字： 返回parseFloat/\d+$/.execopt.value； }; //将元素的值设置为所选元素的总和 //元素编号： document.getElementById'result'.value=values.reduceFunction A，b{ 返回a+b； }; } //将更改事件处理程序绑定到HTML之外，以减少 //突入法： document.getElementById'id\u cur\u month\u catering'。addEventListener'change'，update\u catering，false； [2013-2014]7月 [2013-2014]8月 [2013-2014]9月 [2013-2014]10月 [2013-2014]11月 [2013-2014]12月 付款总额：

---

w3schools作为可靠的信息来源不受欢迎。另外，没有必要将OP发送到jQuery兔子洞。谢谢您的回答，它工作得很好。以及链接资源。我以前搜索过类似的问题。但我还没有找到最好的解决办法。你在链接stackoverflow中给出的案例不是我需要的，它是不同的。是的。接下来我将考虑使用jquery。谢谢你，洛奇Lavoie@torazaburo对于基础，它仍然是一个有效的网站，尤其是初学者的问题。对于jQuery，这完全是个人选择的问题，但我强烈建议任何前端开发人员至少了解jQuery、Bootstrap等主要JS框架之一。。。。它可以节省时间并允许更长期的专业发展。@Bersama欢迎：-很高兴能提供帮助：-jQuery不是一个框架，它是一个库，完全不同。这是什么。选项？另外，我想知道为什么要使用forEach，并在其中推送一个未声明的变量值，而不是map。最后，不需要执行[].slice.callthis.options，0.filter，只要您可以执行[].filter.callthis.option.this.options是节点列表或集合，我现在记不起属于该元素的元素；这是最重要的。至于map，老实说，我只是没有想到它，但谢谢你，我会暂时试用它。你应该在评论中询问OP是否对jQuery解决方案感兴趣。谢谢Danijel，但现在我更喜欢使用JavaCScript

var intNumber = 0;
var arrListOptions = document.getElementById('id_cur_month_catering').options;
for(intIterator = 0; intIterator < arrListOptions.length; intIterator ++){
    if (arrListOptions[intIterator].selected == true){
       intNumber += parseInt(arrListOptions[intIterator].value.split('-')[2]);
    }
}