如何在jquery上汇总两个不同的下拉选择

我想知道是否可以组合并汇总两个不同的选择以显示在下面的total button？我已经在每个选择上插入了计算。当用户选择数量时，数量将自动汇总并显示在"总计按钮"上，但我设法只显示一个 selection.is 是否有可能汇总两个不同的选择并在按钮上显示总数？

$(document).ready(function() {
$("#meatroll").change(function() {
var product = $(this).find(":selected").val();
event.preventDefault();
var x = parseInt($(".product").val());
var total1 = x * "7.50";
alert("Total:" + "$" + total1);
$('.cow').html("Total:" + "$" + total1);
});
});
$(document).ready(function() {
$("#burger").change(function() {
var product2 = $(this).find(":selected").val();
event.preventDefault();
var z = parseInt($(".product2").val());
var total2 = z * "1.20";
alert("Total:" + "$" + total2);
$('.cow').html("Total:" + "$" + total2);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label>
		 <p> Burger...........QTY :
<select id="burger" class="product2">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select></P>
		<p> Meat Roll...... QTY:
<select id="meatroll" class="product">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select> 
</P>
</label>
<label><button class="cow">TOTAL :</button></label>

如何从总数中获取值或文本？

试试这个，只需在按钮中添加 span 标签并添加您的值并更新它。

JavaScript 代码

$(document).ready(function(){
$("#meatroll").change(function(){
var product = $(this).val();
var x = parseInt($(".product").val());        
var total1 = x * "7.50" ;
alert("Total:" +"$"+ total1);           
addToTotal(total1);
});
$("#burger").change(function(){
var product2 = $(this).val();
var z = parseInt($(".product2").val());        
var total2 = z * "1.20" ;
alert("Total:" +"$"+ total2);   
addToTotal(total2);
});
function addToToal(t){
var total = parseInt($("#total").html);
$("#total").html(total+t);
}
});

网页代码

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<label>
<p> Burger...........QTY :
<select id="burger" class="product2">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select></P>

<p> Meat Roll...... QTY:
<select id="meatroll" class="product">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select> 
</P>
</label>
<label><button class="cow">TOTAL :<span id="total"></span></button></label>

只需获取两个下拉列表的值，计算每个下拉列表的价格，将它们加在一起并显示它们。您可以组合选择器，以便为两个下拉列表运行相同的代码。

$(document).ready(function() {
$("#meatroll, #burger").change(function() {
var meatroll = parseInt($("#meatroll").val());
var burger = parseInt($("#burger").val());
var total = meatroll * 7.50 + burger * 1.20;
var product = $(this).find(":selected").val();
alert("Total:" + "$" + total);
$('.cow').html("Total:" + "$" + total);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label>
		 <p> Burger...........QTY :
<select id="burger" class="product2">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select></P>
		<p> Meat Roll...... QTY:
<select id="meatroll" class="product">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select> 
</P>
</label>
<label><button class="cow">TOTAL :</button></label>

如果你想要一个更通用的解决方案，你可以给你所有的下拉菜单一个类，把价格放在一个data-price属性中，然后使用循环。

$(document).ready(function() {
$(".product").change(function() {
var total = 0;
$(".product").each(function() {
var quantity = $(this).val();
var price = $(this).data("price");
total += quantity * price;
});
alert("Total:" + "$" + total);
$('.cow').html("Total:" + "$" + total);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label>
		 <p> Burger...........QTY :
<select id="burger" class="product" data-price="1.20">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select></P>
		<p> Meat Roll...... QTY:
<select id="meatroll" class="product" data-price="7.50">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select> 
</P>
</label>
<label><button class="cow">TOTAL :</button></label>

你可以用这种简单的方式实现它

var sumTotal = function(){
var totalProduct = parseInt($("#meatroll").find(":selected").val()) * 7.50;

var totalProduct2 = parseInt($("#burger").find(":selected").val()) * 1.2;

$('.cow').html("Total:" +"$"+ (totalProduct +  totalProduct2));
};

$(document).ready(function(){
$(".qty").change(function(){
event.preventDefault();
sumTotal();
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
		 <p> Burger...........QTY :
<select id="burger" class="product2 qty">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select></P>
		 <p> Meat Roll...... QTY:
<select id="meatroll" class="product qty">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select> 
</P>
</label>

<label><button class="cow">TOTAL :</button></label>

试试这个

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#meatroll, #burger").change(function() {
var total = (parseInt($("#meatroll").val(), 10) * 7.50 )+ (parseInt($("#burger").val(), 10) * 1.20);
$('.cow').html("Total:   " + "$" + total );
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<label>
<p> Burger...........QTY :
<select id="burger" class="product2">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select></P>
<p> Meat Roll...... QTY:
<select id="meatroll" class="product">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select> 
</P>
</label>
<label><button class="cow">TOTAL :</button></label>

</body>
</html>

Jquery 允许我们指定任意数量的选择器以组合成一个结果。这种多表达式组合器是选择不同元素的有效方法。此外，parseInt(( 函数解析字符串参数并返回指定基数的整数。

相关内容

最新更新

热门标签：