计算多个项目的价格

Calculating price of multiple items

本文关键字：项目 计算      更新时间：2023-09-26

目前我有一个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>

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

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

您可以检查是否使用$(":selected", this).length > 1)选择了多个选项，然后更改$('#quantity_input') 的disabled

$('select').on('change', function() {
  if ($(":selected", this).length > 1) {
    $('#quantity_input').prop('disabled', true);
  } else {
    $('#quantity_input').prop('disabled', false)
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

尝试以下优化版本：

$('#price_input').on('change', function() {
    var items = $(this).val() || [], totalPrice = 0.00;
    $('#quantity_input').attr('disabled', items.length > 1);
    
    var selection = $(':selected', this);
    if (selection.length) {
        $.each(selection, function(i, v){
            totalPrice += parseFloat($(v).data('price'));
        });
    }    
    $('#opt_price').val(totalPrice);
});
  
$('#quantity_input').on('change', function() {
    $('#opt_price').val($('#price_input :selected').data('price') * $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/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>

相关文章：