以动态形式计算选择字段的总和

Question

我有一个问题，它已经困扰我好几天了，我有一个动态选择字段，用户从数据库中选择一种成分，如果他想添加更多成分，他只需点击“添加”按钮，然后创建了另一个选择字段，所有选择字段都显示其名称和价格（作为文本），并且有一个输入文本字段（basePrice）应该具有创建的每个选择的总和

选择字段

   <select name="ingredienteId[]" id="ingredienteId"  onchange="DoMath()">
          <?php foreach($ingredientes as $ingrediente) {
       $essaEhATorta = $torta['ingredienteId'] == $ingrediente['id'];
        $selecao = $essaEhATorta ? "selected='selected'" : "";
        ?> 
            <option value="<?=$ingrediente['id']?>" <?=$selecao?>>
 <?=$ingrediente['nome']?> <?=$ingrediente['price']?>  
        </option>
                              <?php } ?> 
    </select>

动态选择字段

$('#add').click(function() {
var newSelect = $('<label>Ingrediente</label> <select name="ingredienteId[]" id="ingredienteId" class="form-control"> <?php foreach($ingredientes as $ingrediente) {$essaEhATorta = $torta["ingredienteId"] == $ingrediente["id"];$selecao = $essaEhATorta ? 'selected="selected"' : "";?> <option value="<?=$ingrediente["id"]?>" <?=$selecao?>><?=$ingrediente["nome"]?><?=$ingrediente["preco"]?>   </option><?php } ?> </select>')
$('#notas').append(newSelect);
});

basePrice 输入文本字段

<input class="form-control" type="text" value="<?=$torta['precoBase']?>" name="precoBase" id="basePrice"/>

正如我之前所说，选择选项将产品的名称/价格作为文本<?=$ingrediente['nome']?><?=$ingrediente['price']?>，所以我只想要价格我想出了这个代码：

DoMath()

function DoMath(){

var e = document.getElementById("ingredienteId");
var finalPrice= e.options[e.selectedIndex].text;
var noLetterPrice = finalPrice.replace(/[^0-9,"."]/g,'');
var result = parseFloat(noLetterPrice);
document.getElementById("basePrice").value = result;

View

我的部分代码是葡萄牙语，但我希望你们能理解

您可以看到转换部分有效，但我不知道如何使总和部分有效，我尝试了一些方法，但似乎没有任何效果

Answer 1

Instead of taking value and find price using regex will create issue when options names contains some digital values.

在 Jquery 中，我们可以为任何字段提供任何自定义属性。因此，在选项中的自定义属性之一中获取该价格。这将非常容易。

试试下面的代码

选择字段 HTML 结构

<input type="button" name="add" id="add" value="Add" />
<input class="form-control" type="text" value="0" name="precoBase" id="basePrice"/>
<div id="notas">
    <div id="ing_div">
        <label>Ingrediente</label> 
        <select name="ingredienteId[]" class="baseingredient">
            <option value="" ing-price="0"> Select Price</option>
            <?php
            foreach ($ingredientes as $ingrediente) {
                $essaEhATorta = false;
                $selecao = $essaEhATorta ? "selected='selected'" : "";

                ?> 
                <option value="<?= $ingrediente['id'] ?>" <?= $selecao ?> ing-price="<?= $ingrediente['price'] ?>">
                    <?= $ingrediente['nome'] ?> <?= $ingrediente['price'] ?>  
                </option>
            <?php } ?> 
        </select>
    </div>
</div>

在上面的 HTML 中，我在 ing-price 属性中采用了价格。

Javascript 代码

<script>
   $(document).on("click",'#add',function() {
        var newSelect = $('#ing_div').clone();
        newSelect.find("select[name='ingredienteId[]'").val();
        $('#notas').append(newSelect);
    });

    $(document).on("click",".baseingredient",function(){
        tot=0;
        $(".baseingredient").each(function(){
            tot+=parseFloat($(this).find("option:selected").attr("ing-price"));

        })
        $("#basePrice").val(tot);
    });
</script>

Answer 2

You can use each() inside your script, which totals the cost of ingredients, when a select field has been changed.

我们必须为您的select 输入分配第一个class 标签。

<select class="ing" .....

将它也添加到“待附加”select 输入中。

var newSelect = $('<label>Ingrediente</label> <select class="ing" .....

使用each()，我们可以遍历所有带有class标签ing的select字段：

$(document).on("change", ".ing", function(){ /* WHEN A SELECT FIELD HAS CHANGED */

  var total = 0;
  $('.ing').each(function() { /* RUN ALL SELECT FIELD */
    total = total + parseInt($(this).val()); /* SUM UP ALL */
  });
  $("#basePrice").val(total); /* CHANGE THE VALUE OF BASE PRICE FIELD */

});

我更喜欢拥有

$(document).on("change", ".ing", function(){

而不是你以前的

function DoMath(){

由于动态附加的select 字段而起作用。

这是一个jsfiddle（示例），您可以查看。

Answer 3

您应该使用.on() 而不是.click() 和onchange，如下所示：

$(document).on('click','#add',function(){
    var newSelect = $('<label>Ingrediente</label> <select name="ingredienteId[]" id="ingredienteId" class="form-control"> <?php foreach($ingredientes as $ingrediente) {$essaEhATorta = $torta["ingredienteId"] == $ingrediente["id"];$selecao = $essaEhATorta ? 'selected="selected"' : "";?> <option value="<?=$ingrediente["id"]?>" <?=$selecao?>><?=$ingrediente["nome"]?><?=$ingrediente["preco"]?>   </option><?php } ?> </select>')
    $('#notas').append(newSelect);
});

$(document).on('change','#ingredienteId',function(){
    // calculate sum of every select fields
});

您使用的click() 绑定称为“直接”绑定，它只会将处理程序附加到已存在的元素。它不会绑定到将来创建的元素。为此，您必须使用on() 创建一个“委托”绑定。

来自documentation of .on()：

委托事件的优点是它们可以处理来自后代元素的事件，这些事件会在以后添加到文档中。