如何在jquery上将两个不同的下拉选择相加

Question

我想知道是否有可能将两个不同的选择组合起来并汇总到下面显示？我已经在每个选择上插入了计算。当用户选择QTY将自动汇总并显示在“总计按钮”上，但我设法只显示一个 selection.is 是否有可能汇总两个不同的选择并在按钮上显示总计？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>

        </select> 

      </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;}});代码<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>

Answer 4

试试这个<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script>$(document).ready(function(){&nbsp;$("#meatroll, #burger").change(function() {&nbsp; &nbsp; var total = (parseInt($("#meatroll").val(), 10) * 7.50 )+ (parseInt($("#burger").val(), 10) * 1.20);&nbsp; &nbsp; $('.cow').html("Total:&nbsp; &nbsp;" + "$" + total );&nbsp; });});</script></head><body><div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div><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; </select></P>&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; </select>&nbsp;&nbsp; &nbsp; &nbsp; </P>&nbsp; </label><label><button class="cow">TOTAL :</button></label></body></html>Jquery允许我们指定任意数量的选择器以组合成单个结果。这种多表达式组合器是选择不同元素的有效方法。此外，parseInt（） 函数分析字符串参数并返回指定基数的整数。