Question

我要在选择中带上标签“ precio”的值，求出这些值的总和，然后单击textarea“añadiral pedido”放入button“ cuenta”。所选内容的label“值”保存在textarea“ pedido”中

                    <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
                    <script>

                    function calcular(){
                    var cuenta=0.00:
                    
                    $('#pedido').val($('#pedido').val()+"\n"+$('#Pizzas option:selected').text());
var newPrice=cuenta;
                     var newPrice+=parseFloat($(this).find('#Pizzas option:selected').attr('precio'));
    
                    $('#pedido').val($('#pedido').val()+"\n"+$('#Bebidas option:selected').text());
var newPrice+=parseFloat($(this).find('#Bebidas option:selected').attr('precio'));
$("#cuenta").html(newPrice);
                }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="Pizzas" name="Pizzas" class="form-control" >
<?php
<option value="<?php echo $datos[0];?>" precio="<?php echo $datos[1];?>"><?php echo $datos[0];?></option>

 <?php
           }
 ?>
 </select>
 
<select id="Bebidas" name="Bebidas" class="form-control" >
<?php
<option value="<?php echo $datos[0];?>" precio="<?php echo $datos[1];?>"><?php echo $datos[0];?></option>

     <?php
            }
     ?>
  </select>
<div class="col-12">
                            <div style="padding-left:20px;">
                            <textarea name="pedido" class="form-control" id="pedido" cols="30" rows="10" placeholder="Pedido" ></textarea>
                        </div>
                            </div>

<div class="col-12 col-lg-6">
                            <div style="padding-left:10px;">
                            <input type="text" name="cuenta" id="cuenta" class="form-control" placeholder="Cuenta" required  >
                        </div>
                            </div>
  <button name="añadir" type="button" class="btn btn-primary p-3 px-xl-4 py-xl-3" onclick="calcular();"><span></span> Añadir al Pedido</button>

Answer 1

根据您的描述，我认为这就是您想要的。告诉我我是否弄错了，然后告诉我这是否是您所期望的。希望对您有所帮助。

function calcular() {
  let total = parseInt($('#Pizzas').val()) + parseInt($('#Bebidas').val());
  $('#cuenta').val(total);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label>Select 1</label>
<select id="Pizzas" name="Pizzas" class="form-control" required>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<br>

<label>Select 2</label>
<select id="Bebidas" name="Bebidas" class="form-control" required>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
</select>

<br><br>
<input type="text" name="cuenta" id="cuenta" class="form-control" placeholder="Cuenta" required>

<button name="añadir" type="button" class="btn btn-primary p-3 px-xl-4 py-xl-3" onclick="calcular();"><span></span> Añadir al Pedido</button>

Answer 2

检查一下。

在选择列表中选择任何项目时，选择元素将获取所选项目的值。另外，您不应该更改textarea内部html，而必须更改其值。

js引擎的工作原理有些细微差别。 +"123"与parseInt("123")相同。事件更好，因为 parseInt 会删除提醒，但是+"12.3" return 12.3。

如果您将选择列表包装为表单，则可以向其中添加require属性，然后检查是否已选择任何项目。

let allOrdersTotalSumm = 0
let form = document.querySelector('#order-form')
let pizas = document.querySelector('#Pizzas')
let drinks = document.querySelector('#Drinks')
let priceArea = document.querySelector('#cuenta')
let selectedArea = document.querySelector('#pedido')

document.querySelector('#calc').addEventListener('click', calcTotalSum, false)


function calcTotalSum() {
  // Check that items are picked
  if (!form.reportValidity()) {
    return false
  }
  
  let totalSum = +pizas.value + +pizas.value
  let selectedPiza = pizas.options.item(pizas.options.selectedIndex)
  let selectedDrink = drinks.options.item(drinks.options.selectedIndex)  
  
  selectedArea.value += `${selectedPiza.textContent} with ${selectedDrink.textContent}.Total: ${totalSum}\n`
  allOrdersTotalSumm += totalSum
  priceArea.value = allOrdersTotalSumm
  
  // Reset lists to make a new order
  form.reset()
}

<div style="margin-bottom:10px;">
  <form id="order-form">
    <select id="Pizzas" name="Pizzas" class="form-control" data-title="" required>
      <option value="" selected>Please chose your pizza</option>
      <option value="10">Cheesy pizzza</option>
      <option value="12">Cheesy chizz pizzza</option>
      <option value="15">Cheesy beacon cheees pizzza</option>
    </select>

    <select id="Drinks" name="Drinks" class="form-control" data-title="" required>
      <option value="" selected>Please chose your drink</option>
      <option value="7">Coke</option>
      <option value="9">Pepsi</option>
      <option value="12">Milkis</option>
    </select>    
  </form>
</div>

<div style="margin-bottom:10px;">
  <textarea name="pedido" class="form-control" id="pedido" cols="60" rows="10" placeholder="Pedido"></textarea>
</div>

<input type="text" name="cuenta" id="cuenta" class="form-control" placeholder="Cuenta" required>

<button id="calc" name="añadir" type="submit">Añadir al Pedido</button>

使用按钮计算选择到文本区域的价格

2 个答案: