重新计算更改时选择选项的总和

Posted 2023-05-09

【中文标题】重新计算更改时选择选项的总和

【英文标题】：Recalculate sum of select option on change

【发布时间】：2020-07-16 06:35:30

【问题描述】：

我有这个选择器，可以根据选项总和 id 属性和输入数字计算选择更改， 问题是当我选择选项 1 并增加输入数字时工作得很好，但是当我选择选项 2 或 3 并再次增加输入数字时，总和的计算会搞砸。我尝试当我选择不同的选项时，如果将总价格更改为选项 ID 中的价格。

// Input number
 $('input[name=\'cantitate\']').on('change', function() 
      var cant  = $('#cantitate').val();
      var price = $(this).children(":selected").attr("id");
    $('#total').text(price * cant + ' USD');

  );
// Select box
 $('#variantacurs').on('change', function() 
       var cant  = $('#cantitate').val();
       var price = $(this).children(":selected").attr("id");
     $('#total').text(price * cant + ' USD');

  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="total">60</div>

  <select class="form-control" id="variantacurs" name="variantacurs">
    <option value="">---SELECT---</option>
     <option id="100" value="Option 1">Option 1</option>
     <option id="210" value="Option 2">Option 2</option>
     <option id="300" value="Option 3">Option 3</option>
  </select>

 <input type="number" name="cantitate" id="cantitate" placeholder="1" min="1" value="1" >

【问题讨论】：

欢迎来到 Stack Overflow。首先，我建议你不要使用id 属性来存储加法值。

【参考方案1】：

这段代码有很多问题：

id 标签不是存储值的好方法。这些值可以存储在value 属性本身中，而标签是<option> 元素的实际内容。这也使得检索值变得更加容易。 您可以只定义一个函数（例如，在我的示例中为 calc()），并将其分配给输入的 onchange，而不是重复代码。 使用Number() 将从val() 输入的字符串转换为正确的数字。

例子：

// Input number
$('input[name=\'cantitate\']').on('change', calc);
$('#variantacurs').on('change', calc);

function calc() 
      var cant = Number($('#cantitate').val());
      var price = Number($('#variantacurs').val());
      $('#total').text(cant * price + ' USD');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="total">60</div>

<select class="form-control" id="variantacurs" name="variantacurs">
  <option value="60" disabled selected>---SELECT---</option>
  <option value="100">Option 1</option>
  <option value="210">Option 2"</option>
  <option value="300">Option 3"</option>
</select>

<input type="number" name="cantitate" id="cantitate" placeholder="1" min="1" value="1">

【讨论】：

感谢大家的帮助，我想提一下：如果我选择一个选项并增加输入数量到目前为止一切正常，但是如果我改变主意并选择另一个选项，为什么总数实际上会增加以错误的方式，实际上又不是期权价值吗？并且输入的数字没有重置回 1？

由于输入数字未重置回 1，这就是我的代码以及您的代码和 @xdeepakv 代码的设计目的。除非另有编码，否则这两个值是独立的。无论如何，将此标记添加到 select 元素以快速获得该行为：onchange="$('#cantitate').val(1)"。那应该可以。

【参考方案2】：

错字，使用 .form-control 选择的输入/选择值。

$(".form-control").children(":selected")

$("input[name='cantitate']").on("change", function () 
  var cant = $("#cantitate").val();
  var price = $(".form-control").children(":selected").attr("id");
  console.log(price)
  $("#total").text(price * cant + " USD");
);

我会建议不要使用 id 作为 value，使用 value 作为 value。一些 清洁可以如下完成。

(function ($) 
  // Input number
  const input = $("input[name='cantitate']");
  const select = $(".form-control");
  input.on("change", function () 
    calculate($(this).val(), select.children(":selected").val());
  );
  // Select box
  select.on("change", function () 
    calculate(input.val(), $(this).val());
  );
  function calculate(input, selected) 
    var cant = Number(input);
    var price = Number(selected);
    $("#total").text(`Total: $price * cant + " USD"`);
  
)($);

.as-console 
  min-height: 100% !important;


.as-console-row 
  color: blue !important;

<div id="total">Total: 0</div>
    <select class="form-control" id="variantacurs" name="variantacurs">
        <option value="">---SELECT---</option>
        <option value="100">Option 1</option>
        <option value="200">Option 2</option>
        <option value="300">Option 3</option>
    </select>
    <input type="number" name="cantitate" placeholder="1" min="1" value="1">
    <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>