时间戳

首页 > 解决方案 > 如何在jquery上总计两个不同的下拉选择

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

问题描述

我想知道是否可以组合并总计两个不同的选择以显示在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> 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>

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

标签： javascriptphpjqueryhtmlstyles

解决方案

试试这个，只需在按钮中添加 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);
   }
});

HTML 代码

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

推荐阅读