計算多個項目的價格

Question

目前，我有一個HTML表單，允許人們從下拉列表中選擇一個項目，它將價格輸入，甚至在更改數量時也可以更改價格。

我<select id="price_input" multiple> ，以便當我在select標簽內添加“ multiple”（使其成為<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> 

Answer 2

您可以檢查是否使用$(":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> 

Answer 3

嘗試以下優化版本：

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