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

正如我之前所说，select选项将产品的名称/价格作为文本<?=$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

当选项名称包含一些数字值时，使用正则表达式取代价值并找到价格会产生问题。

在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 属性中的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

您应该使用nil代替.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 });绑定称为＆＃34;直接＆＃34;绑定只会将处理程序附加到已存在的元素。它不会受到未来创建的元素的约束。要做到这一点，你必须创建一个＆＃34;委托＆＃34;使用click()进行绑定。

来自documentation of .on()：

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

Answer 3

当选择字段发生变化时，您可以在脚本中使用each()，它总计成分的成本。

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

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

还要附加＆＃34;附加＆＃34; select输入。

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

使用each()，我们可以浏览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(){

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

以下是您可以查看的jsfiddle（示例）。

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

3 个答案: