Question

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

<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时，＆＃34中的价格三倍;期权价格＆＃34;输入例如。

Answer 1

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

计算适用于变更，对于默认值和监控两者，您可以计算出该部分。更改数量下拉功能，以便让您开始。

Answer 2

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();

更新

用数量计算价格

2 个答案: