Question

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

如何制作它以便当我在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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

$('#quantity_input')

$('select').on('change', function() {
  if ($(":selected", this).length > 1) {
    $('#quantity_input').prop('disabled', true);
  } else {
    $('#quantity_input').prop('disabled', false)
  }
})

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>

计算多个项目的价格

3 个答案: