Javascript 计算动态表单中选定字段的总和

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

选择字段

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

正如您所看到的，转换部分可以工作，但我不知道如何使求和部分工作，我尝试了一些方法，但似乎没有任何效果，您应该使用。on代替。单击并再次更改，如下所示：

$(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
});

您正在使用的单击绑定称为直接绑定，它只将处理程序附加到已经存在的元素。它不会绑定到将来创建的元素。为此，您必须使用on创建委托绑定

从：

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

当选择字段被更改时，您可以在脚本中使用，该脚本汇总配料的成本

我们必须为您选择的输入指定第一类标签

使用每个选项，我们可以运行所有具有ing类标记的select字段：

我更喜欢吃

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

而不是你以前的

function DoMath(){

由于动态附加的选择字段而导致的函数

---

下面是一个您可以查看的示例。

当选项名称包含一些数字值时，使用正则表达式代替取值和查找价格将产生问题

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

试试下面的代码

选择字段HTML结构

在上面的HTML中，我在ing Price属性中采用了Price

Javascript代码

---

plz首先删除shorts标记，但无法在html结构中找到add Hey man很棒的代码，但sum部分在这里仍然不起作用自定义属性确实比正则表达式更有意义，但我必须更改“$essaEhATorta=false；”到我的旧$essaEhATorta=$torta['ingredienteId']==$ingrediente['id']；因为这就是我将ingredientsId与另一个表连接的方式，所以我尝试了var option=$'option:selected'，this.attr'ing-price'；tot+=选择权；但是它在基价输入上给了NaN任何提示吗？嘿，我刚刚得到它，parseFloat正在传递NaN和idk为什么，我尝试了parseInt，它工作了，哈哈

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;

$(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
});

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

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

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

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

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