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

Question

我试着计算下列多个组合框的选定选项的值。

<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中，因为我上面解释过，请。

谢谢。

Answer 1

这是一个相当基本的解决方案。你应该在发布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的基础，这短短的脚本链接的列表：

• http://www.w3schools.com/js/js_loop_for.asp
• http://www.w3schools.com/jsref/coll_select_options.asp
• http://www.w3schools.com/jsref/jsref_parseint.asp

而且，这里是一个例子您可以从中得到一个类似问题的启发：

• Javascript Get Values from Multiple Select Option Box

我也建议您学习jQuery，因为这将让你有机会获得更多的编码functionnality这是比较常见的nowday（如在PHP的foreach，将在jQuery中进行。每次）。 这会帮助你在开发时做更多准备。

我希望这是有帮助的:-)

Answer 2

很酷的事情是，jQuery的.val()方法返回的选择框值的数组multiple属性，因此，只要经过该阵列和收集价格（与.replace()和正则表达式为例），并计算值的总和与.reduce()。

$('#id_cur_month_catering').on('change', function() { 

    var sum = $(this).val() 
     .map(function(value) { 
      return value.replace(/.+?-(\d+)$/, function(match, num) { return num; }); 
     }) 
     .reduce(function(a, b) { 
      return parseInt(a, 10) + parseInt(b, 10); 
     }); 

    $('input[name=catering]').val(sum); 

}) 

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

FIDDLE

Answer 3

我个人建议：

function update_catering() { 
 
    // getting all the options, and turning them into an Array (from a NodeList), 
 
    // iterating over that array to keep only those that are selected: 
 
    var selectedOptions = [].slice.call(this.options, 0).filter(function(opt) { 
 
     return opt.selected; 
 
    }), 
 
    // iterating over the selectedOptions array to form a map of the values: 
 
    values = selectedOptions.map(function(opt) { 
 
    // keeping the numeric last-numbers from the value of the option element: 
 
    return parseFloat((/\d+$/).exec(opt.value)); 
 
    }); 
 
    // setting the value of the <input> element to the sum of the selected 
 
    // <option> elements' numbers: 
 
    document.getElementById('result').value = values.reduce(function(a, b) { 
 
    return a + b; 
 
    }); 
 
} 
 

 
// binding the change event-handler outside of the HTML, for a less 
 
// obtrusive approach: 
 
document.getElementById('id_cur_month_catering').addEventListener('change', update_catering, false);

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

 
    <select name="bulan_catering[]" id="id_cur_month_catering" size="12" multiple="multiple"> 
 
    <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 id="result" type="text" name="catering"> 
 
</form>

参考文献：

• Array.prototype.filter()。
• Array.prototype.forEach()。
• Array.prototype.map()。
• Array.prototype.slice()。