用数量计算价格

Calculate price with amount of quantity

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

我有一个供员工使用的网页，他们可以从下拉列表中选择一个商品，它会自动为他们输入该商品的价格。这是我的代码：

<script>
$(document).ready(function() {
  $('#price_input').on('change', function() {
    $selection = $(this).find(':selected');
    $('#opt_value').val($selection.val());
    $('#opt_price').val($selection.data('price'));
  });
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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>
<div>Option Value <input type="text" id="opt_value"/></div>
<div>Option Price <input type="text" id="opt_price"/></div>

代码工作正常，但我怎么能添加一个默认为1的数量输入，当它变为2时，价格会翻倍，当它变成3时，例如，"期权价格"输入中的价格会翻倍。

<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_value').val($selection.val());
    $('#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 Value <input type="text" id="opt_value"/></div>
<div>Option Price <input type="text" id="opt_price"/></div>

计算在更改时起作用，至于默认值和监视两者，您可以计算出这一部分。关于数量下拉函数的更改，因此应该让您开始。

var select = $("#opt");
var price = $("input#opt_price");
var quantity = $("input#opt_quantity");
var onChangeSelect = function() {
    price.val(select.children(":selected").data('price'));
    quantity.val(1);
}
select.on('change', onChangeSelect);
quantity.on('change', function() {
    price.val(select.children(':selected').data('price') * $(this).val());
});
onChangeSelect();

更新的

相关文章：