使用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()。