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>

我需要做的是，例如，如果用户选择7月，8月和9月，它应该计算3500 + 3700 + 4100。总付款的结果应该是11300.但它不能按我的意愿运作。它仅显示上次选择的选项的值。在这种情况下，它显示4100（最后一个值）。有人可以帮助我在javascript中做正确的方式，如上所述，请。

谢谢。

Answer 1

很酷的是，jQuery .val()方法返回带有multiple属性的select框的值数组，因此，只需遍历该数组并收集价格（使用.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 2

这是一个相当基本的解决方案。您应该在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基础：

此外，这里有一个类似问题的例子，你可以从中获得灵感：

Javascript Get Values from Multiple Select Option Box

我还建议你学习jQuery，因为这将允许你访问更多现在相对常见的编码功能（比如php中的foreach，jQuery中的.each）。这有助于您在以后进行开发时做好更充分的准备。

我希望这有用： - ）

Answer 3

我个人建议：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

参考文献：

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

3 个答案: