如何在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(){

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

Answer 2

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

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

Answer 3

您可以通过这种简单的方式实现它

 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>

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(){

 $("#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（） 函数分析字符串参数并返回指定基数的整数。