计算多个项目的价格(Calculating price of multiple items)

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

我如何才能这样做，以便当我在select标签内添加“multiple”（使其成为<select id="price_input" multiple> ）时，它将计算两个或更多项目的价格，如果选择了两个或更多项目，则数量下拉列表已停用？

这是我能够提出的，但它没有上面描述的我需要的增加：

Currently I have a HTML form allows a person to select an item from a dropdown and it will put the price in an input and even change the price if the quantity is changed.

How can I make it so that when I add "multiple" inside the select tag (making it <select id="price_input" multiple>), it will calculate the price for the two or more items and if two or more are selected have the quantity dropdown disabled?

This is what I've been able to come up with but it doesn't have the additions described above that I am in need of:

最满意答案

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

$(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> 
  
 
Using the following you can make it work for multiple products. 
 
 
  
  $(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>

更多推荐