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

Question

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

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

  </label>

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

如何从总计中获取值或文本

Answer 1

试试这个，只需在按钮中添加 span 标签并添加您的值并更新它。JavaScript 代码$(document).ready(function(){&nbsp; &nbsp; $("#meatroll").change(function(){&nbsp; &nbsp; &nbsp; &nbsp; var product = $(this).val();&nbsp; &nbsp; &nbsp; &nbsp; var x = parseInt($(".product").val());&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var total1 = x * "7.50" ;&nbsp; &nbsp; &nbsp; &nbsp; alert("Total:" +"$"+ total1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; addToTotal(total1);&nbsp; &nbsp; });&nbsp; &nbsp; $("#burger").change(function(){&nbsp; &nbsp; &nbsp; &nbsp; var product2 = $(this).val();&nbsp; &nbsp; &nbsp; &nbsp; var z = parseInt($(".product2").val());&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var total2 = z * "1.20" ;&nbsp; &nbsp; &nbsp; &nbsp; alert("Total:" +"$"+ total2);&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; addToTotal(total2);&nbsp; &nbsp;});&nbsp; &nbsp;function addToToal(t){&nbsp; &nbsp; &nbsp; &nbsp;var total = parseInt($("#total").html);&nbsp; &nbsp; &nbsp; &nbsp;$("#total").html(total+t);&nbsp; &nbsp;}});HTML 代码<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p> Burger...........QTY :&nbsp; &nbsp; &nbsp; &nbsp; <select id="burger" class="product2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="0">0</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="5">5</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="10">10</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="20">20</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="30">30</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="40">40</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="50">50</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="60">60</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="70">70</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="80">80</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="90">90</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="100">100</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select></P>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p> Meat Roll...... QTY:&nbsp; &nbsp; &nbsp; &nbsp; <select id="meatroll" class="product">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="0">0</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="5">5</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="10">10</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="20">20</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="30">30</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="40">40</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="50">50</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="60">60</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="70">70</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="80">80</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="90">90</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="100">100</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </P>&nbsp; </label><label><button class="cow">TOTAL :<span id="total"></span></button></label>

Answer 2

只需获取两个下拉列表的值，计算每个下拉列表的价格，将它们加在一起并显示它们。您可以组合选择器为两个下拉菜单运行相同的代码。$(document).ready(function() {&nbsp; $("#meatroll, #burger").change(function() {&nbsp; &nbsp; var meatroll = parseInt($("#meatroll").val());&nbsp; &nbsp; var burger = parseInt($("#burger").val());&nbsp; &nbsp; var total = meatroll * 7.50 + burger * 1.20;&nbsp; &nbsp; var product = $(this).find(":selected").val();&nbsp; &nbsp; alert("Total:" + "$" + total);&nbsp; &nbsp; $('.cow').html("Total:" + "$" + total);&nbsp; });});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><label>&nbsp; &nbsp; &nbsp; &nbsp;<p> Burger...........QTY :&nbsp; &nbsp; &nbsp; &nbsp; <select id="burger" class="product2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="0">0</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="5">5</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="10">10</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="20">20</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="30">30</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="40">40</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="50">50</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="60">60</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="70">70</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="80">80</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="90">90</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="100">100</option>&nbsp; &nbsp; &nbsp; &nbsp; </select></P>&nbsp; &nbsp; &nbsp; <p> Meat Roll...... QTY:&nbsp; &nbsp; &nbsp; &nbsp; <select id="meatroll" class="product">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="0">0</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="5">5</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="10">10</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="20">20</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="30">30</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="40">40</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="50">50</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="60">60</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="70">70</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="80">80</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="90">90</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="100">100</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp;&nbsp; &nbsp; &nbsp; </P>&nbsp; </label><label><button class="cow">TOTAL :</button></label>如果你想要一个更通用的解决方案，你可以给所有的下拉菜单一个类，把价格放在一个data-price属性中，然后使用一个循环。$(document).ready(function() {&nbsp; $(".product").change(function() {&nbsp; &nbsp; var total = 0;&nbsp; &nbsp; $(".product").each(function() {&nbsp; &nbsp; &nbsp; var quantity = $(this).val();&nbsp; &nbsp; &nbsp; var price = $(this).data("price");&nbsp; &nbsp; &nbsp; total += quantity * price;&nbsp; &nbsp; });&nbsp; &nbsp; alert("Total:" + "$" + total);&nbsp; &nbsp; $('.cow').html("Total:" + "$" + total);&nbsp; });});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><label>&nbsp; &nbsp; &nbsp; &nbsp;<p> Burger...........QTY :&nbsp; &nbsp; &nbsp; &nbsp; <select id="burger" class="product" data-price="1.20">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="0">0</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="5">5</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="10">10</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="20">20</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="30">30</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="40">40</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="50">50</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="60">60</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="70">70</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="80">80</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="90">90</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="100">100</option>&nbsp; &nbsp; &nbsp; &nbsp; </select></P>&nbsp; &nbsp; &nbsp; <p> Meat Roll...... QTY:&nbsp; &nbsp; &nbsp; &nbsp; <select id="meatroll" class="product" data-price="7.50">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="0">0</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="5">5</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="10">10</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="20">20</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="30">30</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="40">40</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="50">50</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="60">60</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="70">70</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="80">80</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="90">90</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="100">100</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp;&nbsp; &nbsp; &nbsp; </P>&nbsp; </label><label><button class="cow">TOTAL :</button></label>

Answer 3

您可以通过这种简单的方式实现它&nbsp;var sumTotal = function(){&nbsp; &nbsp; &nbsp;var totalProduct = parseInt($("#meatroll").find(":selected").val()) * 7.50;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;var totalProduct2 = parseInt($("#burger").find(":selected").val()) * 1.2;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;$('.cow').html("Total:" +"$"+ (totalProduct +&nbsp; totalProduct2));&nbsp; &nbsp; };&nbsp; &nbsp;&nbsp;$(document).ready(function(){&nbsp; &nbsp; $(".qty").change(function(){&nbsp; &nbsp; &nbsp; &nbsp;event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp;sumTotal();&nbsp; &nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><label>&nbsp; &nbsp; &nbsp; &nbsp;<p> Burger...........QTY :&nbsp; &nbsp; &nbsp; &nbsp; <select id="burger" class="product2 qty">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="0">0</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="5">5</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="10">10</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="20">20</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="30">30</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="40">40</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="50">50</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="60">60</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="70">70</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="80">80</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="90">90</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="100">100</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select></P>&nbsp; &nbsp; &nbsp; &nbsp;<p> Meat Roll...... QTY:&nbsp; &nbsp; &nbsp; &nbsp; <select id="meatroll" class="product qty">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="0">0</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="5">5</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="10">10</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="20">20</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="30">30</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="40">40</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="50">50</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="60">60</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="70">70</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="80">80</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="90">90</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="100">100</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </P>&nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<label><button class="cow">TOTAL :</button></label>