javascript - 计算多个项目的价格

Question

目前我有一个 HTML 表单允许人们从下拉列表中选择一个项目，它会将价格放入输入中，如果数量发生变化甚至会更改价格。

我怎样才能做到这一点，当我在选择标签中添加“多个”时(使其成为 <select id="price_input" multiple> )，它将计算两个或更多项目的价格，如果选择了两个或更多项目，则数量下拉列表禁用？

这是我能够想出的，但它没有我需要的上述附加内容:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

  $('#price_input').on('change', function() {
    $selection = $(this).find(':selected');
    $('#opt_price').val($selection.data('price'));
    $('#quantity_input').on('change', function() {
    $('#opt_price').val($selection.data('price') * $(this).val());
    });
  });
});
</script>

<select id="price_input">
  <option value="Coffee" data-price="3.00">Coffee</option>
  <option value="Chips" data-price="0.75">Chips</option>
  <option value="Soda" data-price="2.50">Soda</option>
</select>
<select id="quantity_input">
  <option value="1" >1</option>
  <option value="2" >2</option>
  <option value="3" >3</option>
</select>
<div>Option Price <input type="text" id="opt_price"/></div>

Answer 1

使用以下内容，您可以使其适用于多种产品。

$(document).ready(function() {
  $('#price_input').on('change', function() {
    $('#opt_price').val(valueFUnction());
  });
  $('#quantity_input').on('change', function() {
    $('#opt_price').val(valueFUnction());
  });
});

function valueFUnction(quan) {
  var $selection = $('#price_input').find(':selected');
  var quantity = $('#quantity_input').val();
  var total = 0;
  $selection.each(function() {
    total += $(this).data('price') * quantity;
  })
  return total;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="price_input" multiple>
  <option value="Coffee" data-price="3.00">Coffee</option>
  <option value="Chips" data-price="0.75">Chips</option>
  <option value="Soda" data-price="2.50">Soda</option>
</select>
<select id="quantity_input">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<div>Option Price
  <input type="text" id="opt_price" />
</div>