计算多个项目的价格

Question

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

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)然后更改disabled的$('#quantity_input')

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