javascript - 计算多项选择的总和 + 使用基值

Question

这基本上适用于产品具有多个“附加组件”的产品，例如:颜色尺寸&等等

因此这些“附加组件”位于选择的表单字段中。喜欢:

color
<select class="cost">
<option value="0">Blue</option>
<option value="10">Red</option>
<option value="20">Pink</option>
</select>

size
<select class="cost">
<option value="0">small</option>
<option value="10">large</option>
<option value="20">x-large</option>
</select>

我想显示所有选定附加组件的总计以及产品基价。

所以这里假设产品价格在隐藏字段中:

<input name="ProductPrice" value="100"/>

因此，如果我选择颜色为红色且尺寸为 X-L 号，那么总数将为 100+10+20= 130

我只想显示“130”

Answer 1

您可以使用 map() 和 get() 返回 select 值的数组和 reduce() 返回总和并将其添加到基本价格值。此解决方案使用 jQuery。

var base = $('input[name="ProductPrice"]').val();
$("select").change(function() {
  var addons = $('.cost').map(function() {
    return $(this).val()
  }).get().reduce(function(r, e) {
    return r + +e
  }, 0);

  $('input[name="ProductPrice"]').val(+base + addons)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
color
<select class="cost">
  <option value="0">Blue</option>
  <option value="10">Red</option>
  <option value="20">Pink</option>
</select> 
size
<select class="cost">
  <option value="0">small</option>
  <option value="10">large</option>
  <option value="20">x-large</option>
</select>

<input name="ProductPrice" value="100" />

这是使用 Array.from() 和 reduce() 的纯 javascript 解决方案。

var base = document.querySelector('input[name="ProductPrice"]').value
var select = Array.from(document.querySelectorAll('select.cost'));

select.forEach(function(e) {
  e.addEventListener('change', function() {
    var sum = select.reduce(function(r, a) {
      return r + +a.options[a.selectedIndex].value;
    }, 0);

    document.querySelector('input[name="ProductPrice"]').value = +base + sum;
  })
})

color
<select class="cost">
  <option value="0">Blue</option>
  <option value="10">Red</option>
  <option value="20">Pink</option>
</select> 
size
<select class="cost">
  <option value="0">small</option>
  <option value="10">large</option>
  <option value="20">x-large</option>
</select>

<input name="ProductPrice" value="100" />